@font-face{font-family:MiSans;src:url('/static/fonts/MiSans-Web.woff2') format('woff2');font-weight:100 900;font-display:swap}
body:has(> #colorbar-tool){margin:0;background:#f7f8f5;color:#263c3c;font-family:MiSans,"Microsoft YaHei",sans-serif}
#colorbar-tool{--tool-ink:#263c3c;--tool-soft:#6f7e78;--tool-line:#d4dcd4;--tool-accent:#216d65;font:14px/1.65 MiSans,"Microsoft YaHei",sans-serif;color:var(--tool-ink);max-width:1240px;margin:auto;padding:28px 24px;box-sizing:border-box}
#colorbar-tool *{box-sizing:border-box}
#colorbar-tool .tool-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:8px 0 28px}
#colorbar-tool .eyebrow{font-size:11px;color:var(--tool-soft);margin:0 0 9px;letter-spacing:.05em}
#colorbar-tool h1{font-size:27px;font-weight:450;letter-spacing:.04em;margin:0 0 8px;line-height:1.4}
#colorbar-tool h2{font-size:15px;font-weight:500;margin:0;letter-spacing:.02em}
#colorbar-tool .intro{color:var(--tool-soft);font-size:13px;margin:0}
#colorbar-tool .privacy{font-size:11px;color:var(--tool-soft);white-space:nowrap}
#colorbar-tool .workspace{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px;align-items:start}
#colorbar-tool section{background:rgba(255,255,255,.78);border:1px solid var(--tool-line);padding:22px;border-radius:3px;box-shadow:none;min-width:0}
#colorbar-tool .drop{padding:25px 15px;border:1px dashed #aebfb5;background:#f6f8f3;text-align:center;margin-top:18px}
#colorbar-tool .drop p{margin:0 0 14px;font-size:13px}
#colorbar-tool label{font-size:12px;display:block;margin:10px 0}
#colorbar-tool input,#colorbar-tool select,#colorbar-tool button,#colorbar-tool textarea{font-family:inherit;font-size:12px;font-weight:400;line-height:1.5;border:1px solid #c1cec6;border-radius:3px;padding:8px 10px;background:#fff;color:var(--tool-ink)}
#colorbar-tool button,#colorbar-tool .file-button{cursor:pointer;display:inline-block;width:auto;margin:0;text-decoration:none;box-shadow:none}
#colorbar-tool .file-button{border:1px solid #c1cec6;border-radius:3px;padding:8px 10px;background:#fff}
#colorbar-tool .file-button input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
#colorbar-tool button:hover,#colorbar-tool .file-button:hover{background:#edf3ec}
#colorbar-tool button:disabled{opacity:.45;cursor:default}
#colorbar-tool input:not([type=checkbox]):not([type=file]),#colorbar-tool select{display:block;width:100%;margin-top:5px;min-width:0}
#colorbar-tool .primary{background:var(--tool-accent);color:white;border-color:var(--tool-accent)}
#colorbar-tool .primary:hover{background:#18594f}
#colorbar-tool .actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:15px 0}
#colorbar-tool .drop .actions{justify-content:center}
#colorbar-tool small,#colorbar-tool .muted,#colorbar-tool #status,#colorbar-tool #metrics,#colorbar-tool .tool-footnote{display:block;font-size:11px;color:var(--tool-soft);line-height:1.7}
#colorbar-tool .settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#colorbar-tool .check{display:flex;gap:8px;align-items:center}
#colorbar-tool .check input{margin:0;accent-color:var(--tool-accent)}
#colorbar-tool details{border-top:1px solid var(--tool-line);padding:13px 0 0;margin-top:16px;background:none}
#colorbar-tool summary{font-size:12px;color:var(--tool-accent);font-weight:400;cursor:pointer;list-style:revert}
#colorbar-tool .image-stage{max-height:480px;overflow:auto;display:flex;justify-content:center;background:#fafbf8}
#colorbar-tool #source{display:block;max-width:100%;max-height:460px;width:auto;height:auto;object-fit:contain;touch-action:none;cursor:crosshair;margin:10px auto}
#colorbar-tool .result-head{display:flex;gap:16px;align-items:center;justify-content:space-between}
#colorbar-tool .format-label{margin:0;max-width:200px;flex:1}
#colorbar-tool .empty-result{padding:75px 15px;text-align:center;color:var(--tool-soft);font-size:12px}
#colorbar-tool .strip{display:block;width:100%;height:30px;border:1px solid var(--tool-line)}
#colorbar-tool #summary{font-size:12px;color:var(--tool-accent);line-height:1.7}
#colorbar-tool #code{width:100%;height:230px;resize:vertical;background:#f6f8f5;font:12px/1.7 MiSans,monospace;tab-size:4;overflow-wrap:normal;white-space:pre}
#colorbar-tool #error{color:#a24435;white-space:pre-wrap;font-size:12px}
#colorbar-tool [hidden]{display:none!important}
#colorbar-tool :is(button,input,select,textarea,.drop,summary):focus-visible,#colorbar-tool .file-button:focus-within{outline:2px solid #77aaa0;outline-offset:3px}
#colorbar-tool .tool-footnote{margin:22px 0 0}
@media(max-width:780px){#colorbar-tool{padding:20px 14px}#colorbar-tool .workspace{grid-template-columns:1fr;gap:16px}#colorbar-tool .tool-heading{align-items:flex-start;flex-direction:column;gap:8px}#colorbar-tool section{padding:17px}#colorbar-tool h1{font-size:24px}}