/* Common UI foundation. Tool accents and editing surfaces remain local. */
:root {
  --ui-font:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
  --ui-text: #273247;
  --ui-muted: #606c80;
  --ui-background: #f6f7f9;
  --ui-surface: #fff;
  --ui-border: #dce1e8;
  --ui-hover: #eef1f6;
  --ui-accent: #4d50b9;
  --ui-accent-hover: #3d409c;
  --ui-radius: 3px;
  /* Spacing shared by every page: side gutters, the gap between the heading, panels and
     the work area, and the space before the explanation link. */
  --space-gutter: 24px;
  --space-gap: 16px;
  --space-panel: 24px;
  --space-after: 24px;
  font-family: var(--ui-font);
  color: var(--ui-text);
  background: var(--ui-background);
}
body[data-tool="crosszip"] {
  --ui-accent: #245de8;
  --ui-accent-hover: #194fd1;
}
body[data-tool="roughpad"] {
  --ui-accent: #344bc5;
  --ui-accent-hover: #263aab;
}
body[data-tool="marklet"] {
  --ui-accent: #426448;
  --ui-accent-hover: #34513a;
}
body[data-tool="murmur"] {
  --ui-accent: #326958;
  --ui-accent-hover: #265343;
}
@media (max-width: 700px) {
  :root {
    --space-gutter: 16px;
    --space-gap: 12px;
    --space-panel: 16px;
    --space-after: 16px;
  }
}
/* Width of each panel tool's work area; the heading above it uses the same width. */
body[data-tool="crosszip"] {
  --work-max: 880px;
}
body[data-tool="qraft"] {
  --work-max: 1024px;
}
body[data-tool="murmur"] {
  --work-max: 1232px;
}
body[data-tool="pixlet"] {
  --work-max: 1256px;
}
body > header {
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}
/* Tool pages follow rakko.tools: a common site bar on top, then the tool's heading
   (name, one line about it, and its actions) on the page background above the work area.
   The heading starts where the work area starts. */
body[data-tool] > header {
  --heading-inset: max(var(--space-gutter), calc((100% - var(--work-max, 100vw)) / 2));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  height: auto;
  min-height: 0;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border-bottom: 0;
}
body[data-tool] > header > .site-bar {
  order: -1;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px var(--space-gutter);
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}
:is(body[data-tool], body[data-page="info"]) .site-bar-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  color: var(--ui-text);
  font: 800 20px/1.3 var(--ui-font);
  letter-spacing: -0.03em;
}
/* The site's mark (its tab icon) sits before the name in every header and footer. It hangs
   below the baseline so that it is centred on the name's letters. */
.site-name {
  white-space: nowrap;
}
.site-mark {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 6px;
  vertical-align: -6px;
}
/* The narrowest phones have no room for it beside the directory link; the name stays. */
@media (max-width: 359px) {
  body > header .site-mark {
    display: none;
  }
}
:is(body[data-tool], body[data-page="info"]) .site-bar-tagline {
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}
body[data-tool] > header > .brand-with-tagline {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  margin: 24px 0 var(--space-gap) var(--heading-inset);
}
body[data-tool] > header .brand,
body[data-tool] > header .brand strong {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.035em;
}
/* One line height for every panel tool's name (each tool's text sets its own), so every work
   area starts at the same height below the heading. */
body[data-tool]:not([data-layout="canvas"]) > header .brand-title {
  line-height: 1.6;
}
/* Each tool's logo (its tab icon) sits before its name: one size on every panel tool, a little
   smaller in the canvas tools' one bar and on phones. */
body[data-tool] > header .brand-logo {
  flex: none;
  align-self: center;
  width: 28px;
  height: 28px;
}
body[data-layout="canvas"] > header .brand-logo {
  width: 24px;
  height: 24px;
}
@media (max-width: 700px) {
  body[data-tool] > header .brand-logo {
    width: 24px;
    height: 24px;
  }
}
/* The name keeps its text baseline (the canvas tools' tagline sits on it); the logo is centred. */
body[data-tool] > header .brand-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
body[data-tool] > header .brand-tagline {
  color: var(--ui-muted);
  font: 400 15px/1.5 var(--ui-font);
  text-wrap: balance;
  letter-spacing: normal;
}
body[data-tool] > header > .tool-header-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 24px var(--heading-inset) var(--space-gap) auto;
}
body[data-tool] > header .tool-header-nav > * {
  margin: 0;
}
body[data-tool] > header .tool-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: var(--ui-surface);
  font: 600 13px/1.4 var(--ui-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
body[data-tool] > header .tool-action:hover {
  background: var(--ui-hover);
}
body[data-tool] > header .favorite-button > [aria-hidden="true"] {
  font-size: 17px;
  line-height: 1;
}
body[data-tool] > header > #favorites-status {
  flex: 1 0 100%;
  margin: 0 var(--heading-inset) var(--space-gap);
}
/* Canvas tools keep one bar so the drawing area stays tall: the common site bar carries the
   tool's name, purpose and actions between the site name and the directory link. */
body[data-layout="canvas"] > header > .brand-with-tagline {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
}
body[data-layout="canvas"] > header .brand,
body[data-layout="canvas"] > header .brand strong {
  font-size: 22px;
}
body[data-layout="canvas"] > header .brand-tagline {
  font-size: 13px;
}
@media (min-width: 701px) {
  /* 7 + 40px buttons + 8 + the 1px line: the same 56px as the directory and the panel tools. */
  body[data-layout="canvas"] > header {
    min-height: 56px;
    padding: 7px var(--space-gutter) 8px;
    gap: 8px 16px;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
  }
  body[data-layout="canvas"] > header > .site-bar {
    display: contents;
  }
  body[data-layout="canvas"] .site-bar-brand {
    order: -2;
  }
  body[data-layout="canvas"] .site-bar-tagline {
    display: none;
  }
  body[data-layout="canvas"] > header > .brand-with-tagline {
    order: -1;
    flex: 0 1 auto;
    margin: 0;
    padding-left: 16px;
    border-left: 1px solid var(--ui-border);
  }
  body[data-layout="canvas"] > header > .tool-header-nav {
    margin: 0 0 0 auto;
  }
  body[data-layout="canvas"] .site-bar > .tool-directory-link {
    order: 1;
  }
}
/* Tablets and narrow PCs: the canvas tools keep their one bar. The actions show their icons only,
   as on phones (each keeps its name as a tooltip and an accessible name). */
@media (min-width: 701px) and (max-width: 1039px) {
  body[data-layout="canvas"] > header .tool-action {
    width: 40px;
    padding: 0;
  }
  body[data-layout="canvas"] > header .tool-action-label {
    display: none;
  }
}
/* Where even that does not fit, the one-line purpose is left out (as on phones). */
@media (min-width: 701px) and (max-width: 879px) {
  body[data-layout="canvas"] > header .brand-tagline {
    display: none;
  }
}
/* On the narrowest tablets the site's mark is left out too (its name stays) and the parts of the
   bar sit a little closer. */
@media (min-width: 701px) and (max-width: 759px) {
  body[data-layout="canvas"] > header {
    column-gap: 8px;
  }
  body[data-layout="canvas"] .site-bar .site-mark {
    display: none;
  }
}
/* Phones: the site bar keeps one line; the name shares a row with icon-only actions and the
   purpose takes the full width below. The brand box dissolves into the grid (it is a plain div). */
@media (max-width: 700px) {
  body[data-tool] > header:has(> .site-bar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "site site" "title actions" "tagline tagline" "status status";
    align-items: center;
    gap: 0 8px;
  }
  body[data-tool] > header > .site-bar {
    grid-area: site;
    min-height: 48px;
    padding-block: 5px;
  }
  :is(body[data-tool], body[data-page="info"]) .site-bar-tagline {
    display: none;
  }
  body[data-tool] > header:has(> .site-bar) > .brand-with-tagline {
    display: contents;
  }
  body[data-tool] > header:has(> .site-bar) .brand-title {
    grid-area: title;
    min-width: 0;
    margin: 12px 0 0 var(--space-gutter);
  }
  body[data-tool] > header:has(> .site-bar) .brand-tagline {
    grid-area: tagline;
    margin: 2px var(--space-gutter) var(--space-gap);
  }
  body[data-tool] > header > .tool-header-nav {
    grid-area: actions;
    gap: 6px;
    margin: 12px var(--space-gutter) 0 0;
  }
  body[data-tool] > header > #favorites-status {
    grid-area: status;
  }
  body[data-tool]
    > header:has(> .site-bar)
    > .brand-with-tagline
    > :not(.brand-title, .brand-tagline) {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0 var(--space-gutter) var(--space-gap);
  }
  body[data-tool] > header .brand,
  body[data-tool] > header .brand strong {
    font-size: 22px;
  }
  body[data-tool] > header .brand-tagline {
    font-size: 14px;
  }
  body[data-tool] > header .tool-action {
    width: 40px;
    padding: 0;
  }
  body[data-tool] > header .tool-action-label {
    display: none;
  }
  body[data-layout="canvas"] > header:has(> .site-bar) .brand-title,
  body[data-layout="canvas"] > header > .tool-header-nav {
    margin-block: 6px;
  }
  body[data-layout="canvas"] > header:has(> .site-bar) .brand-tagline {
    display: none;
  }
  body[data-layout="canvas"] > header .brand,
  body[data-layout="canvas"] > header .brand strong {
    font-size: 20px;
  }
  body[data-layout="canvas"] > header .brand-tagline {
    font-size: 13px;
  }
}
body[data-tool]:not([data-layout="canvas"]) > main {
  width: 100%;
  max-width: calc(var(--work-max, 100vw) + 2 * var(--space-gutter));
  min-height: 0;
  margin-inline: auto;
  padding: 0 var(--space-gutter) var(--space-after);
}
body[data-tool="murmur"] .workspace,
body[data-tool="pixlet"] .workspace,
body[data-tool="cutout"] .comparison {
  gap: var(--space-gap);
}
body[data-tool="crosszip"] .workspace,
body[data-tool="murmur"] .source.panel {
  padding: var(--space-panel);
}

body[data-tool] > header button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--ui-radius);
}
body[data-tool] > header button:not(.primary):not(.dark) {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
body[data-tool] > header button:not(.primary):not(.dark):hover:not(:disabled) {
  background: var(--ui-hover);
}
body[data-tool] button.primary,
body[data-tool] button.dark {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
  border-radius: var(--ui-radius);
  box-shadow: none;
}
body[data-tool] button.primary:hover:not(:disabled),
body[data-tool] button.dark:hover:not(:disabled) {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}
:is(body[data-tool], body[data-page="info"]) .tool-directory-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: var(--ui-surface);
  font: 600 12px/1.5 var(--ui-font);
  text-decoration: none;
  white-space: nowrap;
}
:is(body[data-tool], body[data-page="info"]) .tool-directory-link:hover {
  background: var(--ui-hover);
  border-color: #aab5c6;
}
body :is(button, a, input, select, textarea, summary, canvas):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}
body[data-tool="roughpad"] {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
body[data-tool="roughpad"] > main {
  height: auto;
  flex: 1;
  min-height: 320px;
}
/* The directory header uses the same size as the common site bar on tool pages. */
body[data-page="directory"] > header {
  display: flex;
  align-items: center;
  max-width: none;
  min-height: 56px;
  padding: 8px var(--space-gutter);
}
body[data-page="directory"] > header .brand {
  flex-direction: row;
  align-items: baseline;
  gap: 16px;
  font: 800 20px/1.3 var(--ui-font);
  letter-spacing: -0.03em;
}
body[data-page="directory"] > header .brand > span:not(.site-name) {
  font-size: 13px;
}
body[data-page="directory"] .brand {
  font-weight: 750;
}
body[data-page="directory"] .tool {
  border-color: var(--ui-border);
  border-radius: 3px;
}
.favorite-button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  color: var(--ui-text);
  background: #fff;
  font: 500 12px/1.5 var(--ui-font);
  cursor: pointer;
}
.favorite-button:hover {
  background: var(--ui-hover);
}
body .favorite-button[aria-pressed="true"],
body[data-tool] > header button.favorite-button[aria-pressed="true"] {
  color: var(--ui-accent);
  border-color: var(--ui-accent);
  background: var(--ui-hover);
}
.favorite-button:focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}
.favorite-status {
  margin: 8px 0 0;
  color: var(--ui-muted);
  font: 400 12px/1.6 var(--ui-font);
}
body[data-tool] > header .favorite-status {
  flex-basis: 100%;
  margin: 0;
}
body[data-page="directory"]
  :is(.tool p, .tool-reading, .brand > span:not(.site-name), .section-heading span, footer) {
  color: var(--ui-muted);
}
body[data-page="directory"] :is(.category, .open) {
  color: var(--ui-accent);
}
@media (max-width: 700px) {
  body[data-page="directory"] > header {
    min-height: 48px;
    padding-block: 6px;
  }
  body[data-page="directory"] > header .brand > span:not(.site-name) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body :is(button, a) {
    transition: none;
  }
}

body[data-tool] .navigation-confirm {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: none;
  color: var(--ui-text);
  background: var(--ui-surface);
}
.navigation-confirm::backdrop {
  background: #27324766;
}
.navigation-confirm h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.5;
}
.navigation-confirm p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.7;
}
.navigation-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}
.navigation-confirm-actions button {
  min-width: 80px;
  min-height: 40px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fff;
  color: var(--ui-text);
  padding: 8px 16px;
  font: 600 14px var(--ui-font);
}

/* Large entry action while no material has been selected. */
body[data-tool] [data-material-picker="empty"] .material-picker-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
body[data-tool] [data-material-picker="empty"] .material-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  min-width: 0;
  max-width: 100%;
  min-height: 64px;
  padding: 18px 28px;
  border: 1px solid var(--ui-accent);
  border-radius: var(--ui-radius);
  background: var(--ui-accent);
  color: #fff;
  font: 600 20px/1.3 var(--ui-font);
  cursor: pointer;
}
body[data-tool] [data-material-picker="empty"] .material-picker-button:hover:not(:disabled) {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}
body[data-tool] [data-material-picker="empty"] .material-picker-button.secondary {
  background: var(--ui-surface);
  color: var(--ui-accent);
}
body[data-tool]
  [data-material-picker="empty"]
  .material-picker-button.secondary:hover:not(:disabled) {
  background: var(--ui-hover);
}
body[data-tool] .material-picker-privacy {
  margin: 12px 0 0;
  text-wrap: balance;
  color: var(--ui-muted);
  font: 400 12px/1.6 var(--ui-font);
}
body[data-tool] [data-material-picker="ready"] .material-picker-privacy {
  display: none;
}
/* Before the button: where to drop (and paste), then "または". Touch screens show the button alone. */
body[data-tool] [data-material-picker="empty"] .material-picker-drop {
  margin: 16px 0 0;
  color: var(--ui-text);
  font: 600 15px/1.6 var(--ui-font);
}
body[data-tool] [data-material-picker="empty"] .material-picker-drop:first-child {
  margin-top: 0;
}
body[data-tool] [data-material-picker="empty"] .material-picker-hint {
  margin: 2px 0 0;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
}
body[data-tool] [data-material-picker="empty"] .material-picker-or {
  margin: 8px 0 12px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}
@media (max-width: 760px) {
  body[data-tool] [data-material-picker="empty"] .material-picker-button {
    font-size: 18px;
    padding-inline: 20px;
  }
}
/* Drop and keyboard-paste hints only apply with a mouse and keyboard.
   A utility class, so it must win over tool styles and the hidden toggle. */
@media (hover: none) and (pointer: coarse) {
  .pointer-hint {
    display: none !important;
  }
}

/* The explanation is part of the page, below the full editing workspace. */
body.has-tool-info[data-tool] {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}
body.has-tool-info[data-tool] > main#tool-workspace {
  flex: none;
}
body.has-tool-info #tool-workspace,
body.has-tool-info #tool-about,
body.has-tool-info #tool-howto {
  scroll-margin-top: 16px;
}
body.has-tool-info #tool-workspace:focus,
body.has-tool-info #tool-about:focus,
body.has-tool-info #tool-howto:focus {
  outline: none;
}
body.has-tool-info .tool-about-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 10px;
  color: var(--ui-muted);
  font: 600 12px/1.5 var(--ui-font);
  text-decoration: none;
  white-space: nowrap;
}
body.has-tool-info .tool-about-link:hover {
  color: var(--ui-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.has-tool-info .tool-about-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  padding: 6px 20px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-muted);
  font: 500 13px/1.5 var(--ui-font);
}
body.has-tool-info .tool-about-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  color: inherit;
  text-decoration: none;
}
body.has-tool-info .tool-about-nav a:hover {
  color: var(--ui-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.has-tool-info .tool-about {
  --about-tint: color-mix(in srgb, var(--ui-accent) 5%, #fff);
  --about-icon-bg: color-mix(in srgb, var(--ui-accent) 10%, #fff);
  --about-line: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-border));
  box-sizing: border-box;
  width: min(1040px, calc(100% - 48px));
  margin: 48px auto 64px;
  padding: 0;
  color: var(--ui-text);
  font: 400 16px/1.9 var(--ui-font);
  overflow-wrap: anywhere;
}
.tool-about :is(h1, h2, h3, h4, p, figure, ol, ul, dl) {
  margin: 0;
}
.tool-about .tool-about-intro {
  padding: 32px;
  border: 1px solid var(--about-line);
  border-top: 3px solid var(--ui-accent);
  border-radius: 8px;
  background: #fff;
}
.tool-about #tool-about-title {
  margin-bottom: 14px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 750;
  line-height: 1.55;
  letter-spacing: -0.025em;
  /* Wrap between phrases, not inside a word, where the browser can. */
  word-break: auto-phrase;
  text-wrap: balance;
}
.tool-about .tool-about-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.tool-about .tool-about-heading #tool-about-title {
  margin-bottom: 0;
}
.tool-about .tool-about-heading > a {
  flex-shrink: 0;
  margin: 0;
  padding-top: 8px;
  font-size: 13px;
  line-height: 1.8;
}
.tool-about .tool-about-intro > a[href="#tool-workspace"] {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
}
.tool-about .tool-about-lead {
  max-width: 880px;
  color: var(--ui-muted);
  font-size: 16px;
  line-height: 1.9;
}
.tool-about .tool-about-section {
  margin-top: 24px;
  padding: 24px 28px 28px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #fff;
}
.tool-about .tool-about-section > :is(h2, h3) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ui-border);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.tool-about .tool-about-section > :is(h2, h3)::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: var(--ui-accent);
  -webkit-mask: var(--about-section-icon) center / contain no-repeat;
  mask: var(--about-section-icon) center / contain no-repeat;
}
.tool-about [data-about="features"] {
  --about-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 6.3L21 12l-6.3 2.7L12 21l-2.7-6.3L3 12l6.3-2.7Z'/%3E%3C/svg%3E");
}
.tool-about [data-about="howto"] {
  --about-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 1.5 1.5L7 4M11 6h10M3 12l1.5 1.5L7 10M11 12h10M3 18l1.5 1.5L7 16M11 18h10'/%3E%3C/svg%3E");
}
.tool-about [data-about="uses"] {
  --about-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='14' rx='2'/%3E%3Cpath d='M8 7V4h8v3M3 12a24 24 0 0 0 18 0M12 12v3'/%3E%3C/svg%3E");
}
.tool-about [data-about="basics"] {
  --about-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5c-3-2-6-2-9-1v15c3-1 6-1 9 1 3-2 6-2 9-1V4c-3-1-6-1-9 1ZM12 5v15'/%3E%3C/svg%3E");
}
.tool-about [data-about="faq"] {
  --about-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4M12 17h.01'/%3E%3C/svg%3E");
}
.tool-about [data-about="privacy"] {
  --about-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6Z'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}
.tool-about [data-about="related"] {
  --about-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
.tool-about p + p {
  margin-top: 12px;
}
.tool-about a {
  color: var(--ui-accent);
  text-underline-offset: 4px;
}
.tool-about a:hover {
  color: var(--ui-accent-hover);
}
.tool-about :is(ul, ol):not(.tool-about-steps) {
  padding-left: 1.5em;
}
.tool-about li + li {
  margin-top: 6px;
}
.tool-about ul.tool-about-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
  list-style: none;
}
.tool-about .tool-about-items > li {
  min-width: 0;
  margin: 0;
}
.tool-about .tool-about-items :is(h3, h4) {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
}
.tool-about .tool-about-items p {
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.85;
}
.tool-about [data-about="features"] .tool-about-items > li {
  padding: 20px;
  border: 1px solid var(--about-line);
  border-radius: 6px;
  background: var(--about-tint);
}
.tool-about .tool-about-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 6px;
  color: var(--ui-accent);
  background: var(--about-icon-bg);
}
.tool-about .tool-about-item-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.tool-about [data-about="uses"] .tool-about-items > li {
  padding: 2px 20px 2px 0;
}
.tool-about [data-about="uses"] .tool-about-items > li + li {
  padding-left: 20px;
  border-left: 1px solid var(--ui-border);
}
.tool-about [data-about="basics"] .tool-about-items {
  grid-template-columns: 1fr;
  gap: 24px;
}
.tool-about [data-about="basics"] .tool-about-items :is(h3, h4) {
  padding-left: 12px;
  border-left: 3px solid var(--ui-accent);
}
.tool-about [data-about="basics"] .tool-about-items p {
  padding-left: 15px;
}
.tool-about .tool-about-items + :is(.tool-about-facts, p) {
  margin-top: 24px;
}
.tool-about .tool-about-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ui-border);
  font-size: 14px;
}
.tool-about .tool-about-actions button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--about-line);
  border-radius: 5px;
  color: var(--ui-accent);
  background: var(--about-tint);
  font: 600 14px/1.5 var(--ui-font);
}
.tool-about .tool-about-actions button:hover {
  border-color: var(--ui-accent);
  background: var(--about-icon-bg);
}
/* Notes under the steps: closed rows that open one at a time, marked in the tool's colour. */
.tool-about .tool-about-notes {
  margin-top: 24px;
  border-top: 1px solid var(--ui-border);
}
.tool-about .tool-about-notes details {
  border-bottom: 1px solid var(--ui-border);
}
.tool-about .tool-about-notes summary {
  padding: 14px 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.tool-about .tool-about-notes summary::marker {
  color: var(--ui-accent);
}
.tool-about .tool-about-notes details[open] summary {
  color: var(--ui-accent);
}
.tool-about .tool-about-notes + .tool-about-actions {
  border-top: 0;
  padding-top: 0;
}
.tool-about .tool-about-note-body {
  padding: 0 0 18px 20px;
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.85;
}
.tool-about .tool-about-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  list-style: none;
}
.tool-about .tool-about-steps > li {
  position: relative;
  min-height: 60px;
  margin: 0;
  padding: 0 0 26px 56px;
}
.tool-about .tool-about-steps > li:last-child {
  padding-bottom: 0;
}
.tool-about .tool-about-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 6px;
  left: 17px;
  width: 2px;
  background: var(--about-line);
}
.tool-about .tool-about-step-number {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ui-accent);
  color: #fff;
  font: 700 15px/1 var(--ui-font);
  font-variant-numeric: tabular-nums;
}
.tool-about .tool-about-steps :is(h3, strong) {
  display: block;
  margin: 2px 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.tool-about .tool-about-steps p {
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.85;
}
.tool-about .tool-about-example {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-background);
}
.tool-about .tool-about-example img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: #fff;
}
.tool-about .tool-about-example > img {
  width: auto;
  max-width: 100%;
  max-height: 400px;
  margin-inline: auto;
}
.tool-about .tool-about-example figcaption {
  margin-top: 14px;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.8;
}
.tool-about .tool-about-facts {
  display: grid;
  grid-template-columns: minmax(100px, 140px) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  font-size: 14px;
}
.tool-about .tool-about-facts > div {
  display: contents;
}
.tool-about .tool-about-facts dt {
  padding: 12px 16px;
  background: var(--ui-background);
  font-weight: 600;
}
.tool-about .tool-about-facts dd {
  margin: 0;
  padding: 12px 16px;
  color: var(--ui-muted);
}
.tool-about .tool-about-facts > div + div > :is(dt, dd) {
  border-top: 1px solid var(--ui-border);
}
.tool-about .tool-about-faq details {
  padding: 0;
  border: 0;
  border-top: 1px solid var(--ui-border);
}
.tool-about .tool-about-faq details:first-child {
  border-top: 0;
}
.tool-about .tool-about-faq summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
}
.tool-about .tool-about-faq summary::-webkit-details-marker {
  display: none;
}
.tool-about .tool-about-question-icon {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  height: 26px;
  border-radius: 4px;
  color: var(--ui-accent);
  background: var(--about-icon-bg);
  font: 700 13px/26px var(--ui-font);
}
.tool-about .tool-about-faq summary::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 4px 0 0 auto;
  background: var(--ui-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.tool-about .tool-about-faq details[open] summary::after {
  transform: rotate(180deg);
}
.tool-about .tool-about-faq details[open] summary {
  color: var(--ui-accent);
}
.tool-about .tool-about-faq details p {
  margin: 0;
  padding: 0 30px 18px 38px;
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.85;
}
.tool-about [data-about="privacy"] {
  border-color: var(--about-line);
  background: var(--about-tint);
}
.tool-about [data-about="privacy"] > :is(h2, h3) {
  border-color: var(--about-line);
}
.tool-about [data-about="privacy"] > p {
  color: var(--ui-muted);
  font-size: 15px;
}
.tool-about .tool-about-related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tool-about .tool-about-related a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 42px 18px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.8;
}
.tool-about .tool-about-related a:hover {
  border-color: var(--ui-accent);
  background: var(--about-tint);
}
.tool-about .tool-about-related a::after {
  content: "";
  position: absolute;
  top: 23px;
  right: 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.tool-about .tool-about-related a > strong {
  font-weight: 650;
}
.tool-about .tool-about-related a > span {
  color: var(--ui-muted);
  font-size: 13px;
}
.tool-about > a[href="#tool-workspace"],
.tool-about > p:has(> a[href="#tool-workspace"]) {
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  font-size: 14px;
}

html.has-expanded-workspace {
  overflow: hidden;
}
body.has-tool-info[data-tool].is-workspace-expanded {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--ui-background);
}
body.has-tool-info[data-tool].is-workspace-expanded > main#tool-workspace {
  height: calc(100dvh - var(--tool-header-height, 56px));
  min-height: 0;
  flex: 1 1 auto;
}
body.has-tool-info.is-workspace-expanded :is(.tool-about, .tool-about-nav, .site-footer) {
  display: none;
}
@media (max-width: 800px) {
  .tool-about ul.tool-about-items {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tool-about [data-about="features"] .tool-about-items > li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
  }
  .tool-about [data-about="features"] .tool-about-item-icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }
  .tool-about [data-about="features"] .tool-about-items p {
    grid-column: 2;
  }
  .tool-about [data-about="uses"] .tool-about-items > li {
    padding: 0;
  }
  .tool-about [data-about="uses"] .tool-about-items > li + li {
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--ui-border);
  }
}
@media (max-width: 700px) {
  body.has-tool-info .tool-about {
    width: calc(100% - 24px);
    margin: 28px auto 40px;
  }
  .tool-about .tool-about-intro {
    padding: 24px 20px;
  }
  .tool-about .tool-about-heading {
    flex-direction: column;
    gap: 8px;
  }
  .tool-about .tool-about-heading > a {
    padding-top: 0;
  }
  .tool-about .tool-about-section {
    margin-top: 16px;
    padding: 20px;
  }
  .tool-about .tool-about-note-body {
    padding-left: 0;
  }
  .tool-about .tool-about-section > :is(h2, h3) {
    margin-bottom: 20px;
    padding-bottom: 16px;
    font-size: 17px;
  }
  .tool-about [data-about="features"] .tool-about-items > li {
    padding: 16px;
    column-gap: 12px;
  }
  .tool-about [data-about="features"] .tool-about-item-icon {
    grid-row: auto;
  }
  .tool-about [data-about="features"] .tool-about-items :is(h3, h4) {
    align-self: center;
    margin-bottom: 0;
  }
  .tool-about [data-about="features"] .tool-about-items p {
    grid-column: 1 / -1;
    margin-top: 12px;
  }
  .tool-about .tool-about-example {
    margin-inline: -8px;
    padding: 12px;
  }
  .tool-about .tool-about-steps > li {
    padding-left: 46px;
  }
  .tool-about .tool-about-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .tool-about .tool-about-facts {
    grid-template-columns: minmax(72px, 90px) minmax(0, 1fr);
  }
  .tool-about .tool-about-facts :is(dt, dd) {
    padding: 10px 12px;
  }
  .tool-about .tool-about-faq details p {
    padding-right: 0;
  }
  .tool-about .tool-about-related {
    grid-template-columns: 1fr;
  }
}

/* Site information is separate from tool-specific result and status footers. */
body > footer.site-footer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: none;
  gap: 16px 28px;
  width: calc(100% - 48px);
  max-width: 1040px;
  margin: 32px auto 0;
  padding: 24px 0 28px;
  border: 0;
  border-top: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-muted);
  font: 400 13px/1.7 var(--ui-font);
}
.site-footer .site-footer-brand {
  color: var(--ui-text);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-footer .site-footer-brand .site-mark {
  width: 21px;
  height: 21px;
  margin-right: 5px;
  vertical-align: -5px;
}
.site-footer nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 32px;
  color: var(--ui-muted);
  text-decoration: none;
}
.site-footer nav a:hover {
  color: var(--ui-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-footer a > span {
  max-width: none;
  margin: 0;
  font: inherit;
  color: inherit;
}
.site-footer a > .site-footer-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 700px) {
  body > footer.site-footer {
    width: calc(100% - 32px);
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding: 20px 0 24px;
  }
  .site-footer nav {
    align-items: flex-start;
    gap: 8px 20px;
  }
}

/* Sharing controls are identical across tools and separate from export dialogs. */
dialog.tool-share {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  color: var(--ui-text);
  background: var(--ui-surface);
  font: 400 14px/1.7 var(--ui-font);
}
dialog.tool-share::backdrop {
  background: #27324766;
}
.tool-share h2 {
  margin: 0 0 12px;
  font: 700 20px/1.5 var(--ui-font);
}
.tool-share h3 {
  margin: 24px 0 10px;
  font: 600 14px/1.5 var(--ui-font);
}
.tool-share p {
  margin: 0 0 18px;
  color: var(--ui-muted);
  font: 400 13px/1.8 var(--ui-font);
}
.tool-share label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.tool-share-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool-share input {
  box-sizing: border-box;
  flex: 1 1 220px;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: var(--ui-background);
  color: var(--ui-text);
  font: 400 14px/1.5 var(--ui-font);
}
.tool-share button,
.tool-share-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font: 600 13px/1.5 var(--ui-font);
  text-decoration: none;
  cursor: pointer;
}
.tool-share button:hover:not(:disabled),
.tool-share-social a:hover {
  background: var(--ui-hover);
}
.tool-share button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.tool-share [hidden] {
  display: none;
}
.tool-share-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool-share #share-status {
  min-height: 24px;
  margin: 16px 0;
}
.tool-share-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-tool] > header .brand-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.favorite-button.favorite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font: 400 24px/1 var(--ui-font);
  cursor: pointer;
}
.favorite-button.favorite-icon > span {
  color: inherit;
  font: inherit;
  letter-spacing: normal;
}
.favorite-button.favorite-icon[aria-pressed="true"] {
  color: var(--ui-accent);
}
.favorite-button.favorite-icon:hover {
  background: var(--ui-hover);
}