/* 工具頁沿用網站的文字、色彩與外觀設定。 / Tools inherit the site's typography, palette and theme. */
.tools-main { max-width:1120px; padding-block:64px 80px }
.tools-heading { margin-bottom:48px; max-width:70ch }
.tools-heading h1 { color:var(--ink); font-size:clamp(32px,4vw,46px); line-height:1.25; letter-spacing:-.025em }
.tools-heading p { margin-top:16px; font-size:17px }
.tool-entry { padding-block:40px 0; border-top:1px solid var(--line); scroll-margin-top:110px }
.tool-entry + .tool-entry { margin-top:56px }
.tool-intro { max-width:76ch }
.tool-title { display:flex; align-items:center; gap:16px }
.tool-title img { width:64px; height:64px; object-fit:contain; flex-shrink:0 }
.tool-title h2 { color:var(--ink); font-size:clamp(25px,3vw,34px); line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere }
.tool-meta { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:6px; font-size:13px; font-variant-numeric:tabular-nums }
.tool-summary { margin-top:24px; color:var(--ink-800); font-size:18px; line-height:1.8 }
.tool-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:24px }
.tools-page .tool-actions .button { color:var(--white); background:var(--ink); min-height:48px; white-space:normal; text-align:center }
.tools-page .tool-actions .button:hover { background:var(--ink-800) }
.tool-source { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--teal); font-weight:700; line-height:1.5 }
.tool-source svg { width:18px; height:18px }
.tool-download-source { font-size:13px; margin-top:12px }
.tool-visual { margin-top:36px }
.tool-visual a { display:block; border:1px solid var(--line); border-radius:12px; overflow:hidden }
.tool-visual img { display:block; width:100%; height:auto }
.tool-visual figcaption { margin-top:10px; color:var(--muted); font-size:12px; line-height:1.7 }
.tool-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; margin-top:48px }
.tools-main h3 { color:var(--ink); font-size:19px; line-height:1.5; margin-bottom:12px }
.tool-body ul,.tool-body ol { margin:0; padding-left:1.5em; color:var(--ink-800) }
.tool-body li { padding-left:4px; margin-bottom:12px; line-height:1.85 }
.tool-body li:last-child { margin-bottom:0 }
.tool-body li::marker { color:var(--teal); font-variant-numeric:tabular-nums }
.tool-notes { margin-top:40px; padding-top:32px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px }
.tool-notes p { max-width:70ch; font-size:14px; line-height:1.9; color:var(--ink-700) }
.tool-notes h3 { font-size:16px; margin-bottom:8px }
.tool-file-details { margin-top:32px; font-size:13px }
.tool-file-details summary { display:list-item; width:fit-content; cursor:pointer; min-height:44px; padding-block:10px; color:var(--teal); font-weight:700 }
.tool-file-details summary:focus-visible { outline:3px solid var(--teal); outline-offset:4px; border-radius:2px }
.tool-file-details dl { margin:8px 0 0; padding:18px 24px; background:var(--paper); border-radius:12px; font-variant-numeric:tabular-nums }
.tool-file-details dl > div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; padding-block:6px }
.tool-file-details dt { font-weight:700; color:var(--ink) }
.tool-file-details dd { margin:0; color:var(--ink-700); overflow-wrap:anywhere }
.tool-file-details code { font-size:12px; color:inherit; background:transparent }
.tool-checksum { word-break:break-all }
.tools-page ::selection { color:var(--ink); background:var(--mint) }
html[data-theme="dark"] .tools-page .tool-actions .button { color:#112d3d; background:var(--ink) }
html[data-theme="dark"] .tools-page .tool-actions .button:hover { background:var(--ink-800) }
@media (max-width:880px) {
  .tools-main { padding-block:40px 56px }
  .tools-heading { margin-bottom:32px }
  .tool-entry { padding-top:32px; scroll-margin-top:24px }
  .tool-body,.tool-notes { gap:32px }
}
@media (max-width:640px) {
  .tools-main { width:calc(100% - 40px) }
  .tool-title { gap:12px }
  .tool-title img { width:46px; height:46px }
  .tool-title h2 { font-size:24px }
  .tool-summary { font-size:17px }
  .tool-actions { align-items:flex-start; flex-direction:column; gap:8px }
  .tool-body,.tool-notes { grid-template-columns:minmax(0,1fr); gap:28px; margin-top:32px }
  .tool-body { margin-top:36px }
  .tool-notes { padding-top:28px }
  .tool-file-details dl { padding:16px }
  .tool-file-details dl > div { grid-template-columns:minmax(0,1fr); gap:4px }
}