.tool{--tool-preview-h: 280px;word-break:break-word;overflow-wrap:break-word}.tool-status{align-self:stretch;margin:0 0 var(--space-s);text-align:left;min-height:1.6em;color:var(--ink-soft);font-size:var(--text-s);line-height:1.6}.tool-status:empty{display:none}.tool label{display:block;margin:var(--space-s) 0 var(--space-xs);color:var(--ink-soft);font-size:var(--text-base);line-height:1.4}.tool input[type=text],.tool input[type=number],.tool select,.tool textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font:inherit;font-size:var(--text-base)}.tool input[type=text],.tool input[type=number],.tool select,.tool textarea{padding:var(--space-s);background:var(--field);line-height:1.5}.tool input:disabled,.tool select:disabled{opacity:.5;cursor:not-allowed}.tool select{appearance:none;padding-right:calc(var(--space-s) * 2 + 12px);background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - var(--space-s) - 10px) 50%,calc(100% - var(--space-s) - 5px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}.tool .file-drop{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-l) var(--space-base);border:3px dashed var(--accent);border-radius:var(--radius);background:var(--accent-soft);color:var(--ink);text-align:center;cursor:pointer}.prose>*+.file-drop{margin-block-start:var(--space-base)}.tool .file-drop.is-over,.tool .file-drop:has(input:focus-visible){border-style:solid}.tool .file-drop input[type=file]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.tool .file-drop .rd-icon{color:var(--accent)}.tool .file-drop-title{font-weight:var(--weight-bold)}.tool .file-drop-hint{color:var(--ink-soft);font-size:var(--text-s)}.tool .file-drop-selected{font-size:var(--text-s);word-break:break-all}.tool .file-drop-selected:empty{display:none}.tool .file-drop .on-touch{display:none}@media (hover: none){.tool .file-drop .on-mouse{display:none}.tool .file-drop .on-touch{display:inline}}.tool textarea{min-height:200px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.tool input.start-field,.tool textarea.start-field{border:3px dashed var(--accent);border-radius:var(--radius);background:var(--accent-soft);padding:var(--space-base)}.tool input.start-field:focus,.tool textarea.start-field:focus{border-style:solid}.tool input.start-field:focus,.tool textarea.start-field:focus{outline:none}.tool input[type=range]{width:100%;height:24px;appearance:none;background:transparent}.tool input[type=range]::-webkit-slider-runnable-track{box-sizing:border-box;height:8px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--field)}.tool input[type=range]::-moz-range-track{box-sizing:border-box;height:8px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--field)}.tool input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}.tool input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}.tool button,.tool .button-like{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-s);width:auto;margin-inline:0;margin-block-end:0;padding:var(--space-s) var(--space-base);border:1px solid var(--accent);border-radius:var(--radius-pill);background:var(--accent);color:var(--bg);font:inherit;font-size:var(--text-s);font-weight:var(--weight-bold);line-height:1.4;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}.tool button:hover,.tool .button-like:hover{background:var(--accent);border-color:var(--accent)}.tool button:disabled,.tool .button-like.is-disabled{border-color:var(--ink-soft);background:var(--ink-soft);color:var(--bg);cursor:not-allowed}.tool .button-like.is-disabled{pointer-events:none}.tool button.secondary{border-color:var(--line);background:var(--bg-soft);color:var(--ink)}.tool button.secondary:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.tool button.secondary:disabled{border-color:var(--ink-soft);background:var(--ink-soft);color:var(--bg);cursor:not-allowed}.tool button svg,.tool .button-like svg{flex:none;width:18px;height:18px;fill:currentColor}.tool button.secondary.is-done{border-color:var(--accent);color:var(--accent)}.tool .download-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-s)}.tool .tool-flow{display:flex;flex-direction:column;align-items:center;gap:var(--space-s)}.tool .tool-flow:after{content:"";width:48px;height:14px;background:var(--line);clip-path:polygon(0 0,100% 0,50% 100%)}.tool>.tool-flow+*{margin-block-start:var(--space-s)}.tool .is-hidden{display:none}.tool .row{display:flex;flex-wrap:wrap;gap:var(--space-base)}.tool .row>*{flex:1;min-width:140px}.tool .three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-s)}.tool .three-col>*{min-width:0}.tool .filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-base)}.tool .preview-area{height:var(--tool-preview-h);padding:var(--space-base);overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);text-align:center}.tool .preview-area canvas{max-width:100%;max-height:var(--tool-preview-h);height:auto;margin:0}.tool .qr-preview{display:flex;flex-direction:column;align-items:center}.tool .qr-preview canvas{margin:auto;width:min(100%,calc(var(--tool-preview-h) - var(--space-base) * 2));height:auto;border-radius:var(--radius-sm)}.tool .preview-area.max-300{height:auto;min-height:var(--tool-preview-h);max-height:none;overflow:hidden}.tool .preview-area.max-300 canvas{width:auto;max-height:var(--tool-preview-h)}.tool .crop-wrap{position:relative;display:inline-block;max-width:100%;max-height:var(--tool-preview-h);overflow:hidden;line-height:0}.tool .crop-wrap canvas{display:block;width:auto;max-width:100%;height:auto;max-height:var(--tool-preview-h);touch-action:none}.tool .crop-overlay{position:absolute;border:2px dashed var(--bg);box-shadow:0 0 0 9999px #00000080;box-sizing:border-box;pointer-events:none}.tool .code-output{height:var(--tool-preview-h);padding:var(--space-base);overflow-y:scroll;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--text-s);line-height:1.7;word-break:break-all;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.tool .code-output pre{margin:0;padding:0;overflow:visible;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;white-space:pre-wrap}.tool .code-output::-webkit-scrollbar{width:10px}.tool .code-output::-webkit-scrollbar-thumb{border-radius:var(--radius-pill);background:var(--line)}.tool .thumb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));align-content:start;gap:var(--space-s);min-height:var(--tool-preview-h);max-height:calc(var(--tool-preview-h) * 2);padding:var(--space-base);overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}.tool .thumb-list .tool-status{grid-column:1 / -1}.tool .thumb-list .thumb{padding:var(--space-s);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink-soft);font-size:var(--text-s);text-align:center}.tool .thumb-list .thumb img{width:100%;height:80px;margin:0;border:0;object-fit:contain}.tool .warning{margin:0 0 var(--space-base);color:var(--danger);font-size:var(--text-base);font-weight:var(--weight-bold)}.tool .warning p{margin:0;color:inherit}.tool .warning .warning-detail{margin-top:var(--space-xs);font-size:var(--text-s);font-weight:var(--weight-normal)}.tool .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.tool .input-frame{padding:var(--space-base);border:3px dashed var(--accent);border-radius:var(--radius);background:var(--accent-soft)}.tool .input-frame:focus-within{border-style:solid}.tool .input-row{display:flex;align-items:center;gap:var(--space-s)}.tool .input-row label{flex:none;margin:0;color:var(--ink)}.tool .field-error{margin:var(--space-xs) 0 0;color:var(--danger);font-size:var(--text-s)}.tool .field-error:empty{display:none}.tool .result-box{padding:var(--space-base);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}.tool .value-table{min-width:0}.tool .value-table th,.tool .value-table td{border:0;border-bottom:1px solid var(--line);background:none}.tool .value-table tr:last-child>*{border-bottom:0}.tool .value-table th{width:1%;padding-left:0;white-space:nowrap}.tool .value-table td:first-of-type{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:normal}.tool .value-table td:last-child{width:1%;padding-right:0;white-space:nowrap;text-align:right}.tool .color-field input[type=color]{flex:none;width:48px;height:48px;padding:var(--space-xs);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--field);cursor:pointer}.tool .color-field input[type=text]{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.tool .hsv-picker{margin-top:var(--space-base)}.tool .hsv-area{position:relative;height:180px;border-radius:var(--radius-sm);background:linear-gradient(to top,black,transparent),linear-gradient(to right,#fff,hsl(var(--hue, 0) 100% 50%));cursor:crosshair;touch-action:none}.tool .hsv-thumb{position:absolute;left:calc(var(--sat, 0) * 100%);top:calc((1 - var(--val, 0)) * 100%);width:18px;height:18px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #0009;transform:translate(-50%,-50%);pointer-events:none}.tool .hsv-picker input.hsv-hue{margin-top:var(--space-s)}.tool .hsv-picker input.hsv-hue::-webkit-slider-runnable-track{height:12px;border:0;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tool .hsv-picker input.hsv-hue::-moz-range-track{height:12px;border:0;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tool .hsv-picker input.hsv-hue::-webkit-slider-thumb{margin-top:-4px;border:3px solid white;background:transparent;box-shadow:0 0 0 1px #0009}.tool .hsv-picker input.hsv-hue::-moz-range-thumb{border:3px solid white;background:transparent;box-shadow:0 0 0 1px #0009}.tool .contrast-inputs{display:grid;gap:var(--space-base)}@media (min-width:721px){.tool .contrast-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}}.tool .contrast-preview{padding:var(--space-base);border:1px solid var(--line);border-radius:var(--radius);background:var(--sample-bg, var(--field));color:var(--sample-fg, var(--ink))}.tool .contrast-preview p{margin:0;color:inherit}.tool .contrast-preview p+p{margin-top:var(--space-s)}.tool .contrast-preview-normal{font-size:var(--text-base)}.tool .contrast-preview-large{font-size:var(--text-xl)}.tool .contrast-preview-ui{display:flex;flex-wrap:wrap;gap:var(--space-s)}.tool .contrast-preview-btn{display:inline-block;padding:var(--space-s) var(--space-base);border:2px solid var(--sample-fg, var(--ink));border-radius:var(--radius-pill);font-size:var(--text-s)}.tool .contrast-preview-btn.is-filled{background:var(--sample-fg, var(--ink));color:var(--sample-bg, var(--field))}.tool .contrast-ratio{margin:var(--space-base) 0 var(--space-s);font-size:var(--text-base);text-align:center}.tool .contrast-ratio strong{font-size:var(--text-xl)}.tool .contrast-table{min-width:0}.tool .contrast-table td,.tool .contrast-table thead th:not([rowspan]){text-align:center;white-space:nowrap}.tool .contrast-note{display:block;font-weight:var(--weight-normal);font-size:var(--text-xs)}.tool .contrast-mark svg{display:inline-block;width:20px;height:20px;vertical-align:middle}.tool .contrast-pass,.tool .contrast-fail{display:none}.tool .contrast-mark.is-pass .contrast-pass,.tool .contrast-mark.is-fail .contrast-fail{display:inline}.tool .contrast-mark.is-pass{color:var(--accent)}.tool .contrast-mark.is-fail{color:var(--danger)}.tool .input-row input[type=number]{flex:1;min-width:0}.tool .input-row input.unit-base{flex:none;width:6.5em}.tool .input-row .unit-label{width:5em}.tool .unit-suffix{flex:none;color:var(--ink-soft)}.tool .unit-base-row{flex-wrap:wrap;row-gap:var(--space-xs)}.tool .unit-value{margin-top:var(--space-base)}.tool .unit-value select{flex:none;width:auto}.tool .result-box .annotation{margin:var(--space-s) 0 0}.tool .picker-swatch{height:120px;border:1px solid var(--line);border-radius:var(--radius);background:var(--swatch, var(--field));margin-bottom:var(--space-base)}@media (max-width:720px){.tool .three-col{grid-template-columns:1fr}.tool .result-box{padding:var(--space-s)}.tool .contrast-table th,.tool .contrast-table td{padding:var(--space-xs)}}.tool-band[data-astro-cid-mqzpnqfb]{background:var(--bg-soft)}.tool-band-in[data-astro-cid-mqzpnqfb]{max-width:var(--w-article);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-base);padding-top:var(--space-l);padding-bottom:var(--space-base)}.tool-band-stage[data-astro-cid-mqzpnqfb]{display:flex;align-items:center;gap:var(--space-base)}.tool-band-say[data-astro-cid-mqzpnqfb]{position:relative;max-width:320px;margin:0;padding:calc(var(--space-s) * 1.5) var(--space-base);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-size:var(--text-s);line-height:1.8}.tool-band-say[data-astro-cid-mqzpnqfb]:before,.tool-band-say[data-astro-cid-mqzpnqfb]:after{content:"";position:absolute;left:100%;top:50%;width:0;height:0;border-style:solid;border-color:transparent}.tool-band-say[data-astro-cid-mqzpnqfb]:before{margin-top:-8px;border-width:8px 0 8px 10px;border-left-color:var(--line)}.tool-band-say[data-astro-cid-mqzpnqfb]:after{margin-top:-7px;margin-left:-1px;border-width:7px 0 7px 9px;border-left-color:var(--bg)}.tool-band-copy[data-astro-cid-mqzpnqfb]{align-self:start;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-s);align-items:start}.tool-band-copy[data-astro-cid-mqzpnqfb] p[data-astro-cid-mqzpnqfb]{grid-column:1 / -1}.tool-band-ic[data-astro-cid-mqzpnqfb]{color:var(--ink);font-size:clamp(var(--text-xl),4vw,calc(var(--text-xl) * 1.3));line-height:1.3}.tool-band-ic[data-astro-cid-mqzpnqfb] svg{display:block;width:1.3em;height:1.3em}.tool-band-copy[data-astro-cid-mqzpnqfb] h1[data-astro-cid-mqzpnqfb],.tool-band-copy[data-astro-cid-mqzpnqfb] p[data-astro-cid-mqzpnqfb]{word-break:auto-phrase;text-wrap:pretty}.tool-band-copy[data-astro-cid-mqzpnqfb] h1[data-astro-cid-mqzpnqfb]{margin:0;font-size:clamp(var(--text-xl),4vw,calc(var(--text-xl) * 1.3));line-height:1.3;font-weight:var(--weight-bold)}.tool-band-copy[data-astro-cid-mqzpnqfb] p[data-astro-cid-mqzpnqfb]{margin:var(--space-s) 0 0;color:var(--ink-soft);font-size:var(--text-s)}.tool-band-mb[data-astro-cid-mqzpnqfb]{display:block;height:160px;width:auto;max-width:none;filter:var(--mascot-filter);animation:mascot-rise var(--dur-slow) var(--ease-spring) both}@media (min-width:1200px){.tool-band-in[data-astro-cid-mqzpnqfb]{max-width:var(--w-container)}}@media (max-width:1199px){.tool-band-in[data-astro-cid-mqzpnqfb]{grid-template-columns:minmax(0,1fr);row-gap:var(--space-base)}.tool-band-say[data-astro-cid-mqzpnqfb]{flex:1;max-width:none}}@media (max-width:720px){.tool-band-mb[data-astro-cid-mqzpnqfb]{height:110px}.tool-band-copy[data-astro-cid-mqzpnqfb] h1[data-astro-cid-mqzpnqfb],.tool-band-ic[data-astro-cid-mqzpnqfb]{font-size:var(--text-l)}}@media (prefers-reduced-motion:reduce){.tool-band-mb[data-astro-cid-mqzpnqfb]{animation:none}}.tool-faq[data-astro-cid-mqzpnqfb]{margin-top:var(--space-l)}.tool-faq[data-astro-cid-mqzpnqfb] h2[data-astro-cid-mqzpnqfb]{margin-top:0;padding-top:var(--space-l)}@media (min-width:1200px){.article[data-astro-cid-mqzpnqfb].article--tool{max-width:var(--w-container);display:grid;grid-template-columns:minmax(0,1fr) var(--w-toc);column-gap:var(--space-xl);align-items:start}.tool-faq[data-astro-cid-mqzpnqfb]{margin-top:0}.article--tool[data-astro-cid-mqzpnqfb]>.art-more[data-astro-cid-mqzpnqfb]{grid-column:1 / -1}}