:root{--font-sans:"Source Sans 3","Segoe UI",system-ui,sans-serif;--font-serif:"Source Serif 4",Georgia,serif;--paper:#f4f2ee;--surface:#fbfaf8;--white:#fbfbfa;--ink:#2a2724;--ink-2:#5c574f;--mute:#6f695f;--line:#e6e2da;--accent:#2f6f7e;--accent-hover:#275e6b;--accent-soft:#e7f1f3;--danger:#9f2f2d;--ok:#346538;--radius:8px;--btn-r:6px;--pad:16px;--max:1280px}*{box-sizing:border-box}html,body{margin:0}body{font-family:var(--font-sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}img{max-width:100%;display:block}.wrap{max-width:var(--max);padding:0 var(--pad)48px;margin:0 auto}@media (min-width:768px){:root{--pad:24px}}@media (min-width:1120px){:root{--pad:32px}}.site-header{background:var(--surface);border-bottom:1px solid var(--line);z-index:20;position:sticky;top:0}.head{max-width:var(--max);height:56px;padding:0 var(--pad);align-items:center;gap:12px;margin:0 auto;display:flex}@media (min-width:720px){.head{height:64px}}.logo{letter-spacing:-.03em;white-space:nowrap;color:var(--accent);align-items:center;gap:9px;min-height:44px;font-size:18px;font-weight:700;display:inline-flex}.brand-mark{flex:none;width:30px;height:30px}.brand-wordmark{color:var(--ink)}.brand-wordmark span{color:var(--accent)}.color-readouts{gap:8px;display:grid}.color-value{border:1px solid var(--line);border-radius:var(--btn-r);background:var(--white);text-align:left;cursor:pointer;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;display:grid}.color-chip{border:1px solid var(--line);border-radius:50%;width:24px;height:24px}.palette{grid-template-columns:repeat(6,minmax(36px,1fr));gap:8px;margin-top:12px;display:grid}.palette-swatch{border:1px solid var(--line);border-radius:var(--btn-r);cursor:pointer;height:44px}.nav-links{color:var(--ink-2);gap:20px;font-size:15px;display:none}.search-wrap{min-width:0;margin-left:auto;position:relative}.search-input{border:1px solid var(--line);border-radius:var(--btn-r);background:var(--white);width:44px;height:44px;color:var(--ink);padding:0 8px 0 32px;font-size:16px}.search-input:focus{width:min(220px,100vw - 180px)}.search-input::placeholder{color:var(--mute)}.icon-btn{border:1px solid var(--line);border-radius:var(--btn-r);background:var(--white);cursor:pointer;place-items:center;width:44px;height:44px;display:grid}.mobile-panel{padding:12px var(--pad)16px;border-top:1px solid var(--line);background:var(--surface);flex-direction:column;gap:12px;display:none}.mobile-panel.open{display:flex}@media (max-width:359px){.head{gap:8px}.logo{gap:7px}.brand-wordmark{display:none}.search-input:focus{width:calc(100vw - 136px)}}@media (min-width:720px){.nav-links{display:flex}.menu-btn{display:none}.search-input{width:260px;padding:0 12px 0 36px;font-size:15px}.search-input:focus{width:260px}.mobile-panel{display:none!important}}.hero{padding:32px 0 8px}.hero h1{font-family:var(--font-serif);letter-spacing:-.03em;margin:0 0 8px;font-size:clamp(28px,6vw,40px);font-weight:600;line-height:1.15}.lede{color:var(--ink-2);max-width:36em;margin:0}.drop{border:1px dashed var(--line);border-radius:var(--radius);background:var(--white);text-align:center;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:160px;margin-top:24px;padding:24px;display:flex}.drop.over{background:var(--accent-soft);border-color:var(--accent)}@media (min-width:768px){.drop{min-height:200px}}.tabs{border-bottom:1px solid var(--line);scrollbar-width:none;gap:4px;margin-top:28px;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{height:44px;color:var(--ink-2);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;flex:none;padding:0 14px}.tab[aria-selected=true]{color:var(--accent);background:var(--accent-soft);border-bottom-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);font-weight:600}.row{border-bottom:1px solid var(--line);align-items:center;gap:12px;min-height:56px;padding:8px 4px;display:flex}.row:hover{background:#efebe4}.ico{border:1px solid var(--line);background:var(--white);border-radius:6px;place-items:center;width:40px;height:40px;display:grid}.row h2{margin:0;font-size:16px;font-weight:600}.row p{color:var(--mute);margin:0;font-size:13px}.grow{flex:1}.mute{color:var(--mute)}.mono{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px}.empty{color:var(--mute);padding:24px 4px}.site-footer{border-top:1px solid var(--line);color:var(--mute);flex-wrap:wrap;gap:16px;margin-top:48px;padding:24px 0;font-size:13px;display:flex}.crumb{color:var(--mute);padding-top:16px;font-size:13px}.crumb a{text-underline-offset:2px;text-decoration:underline}.tool-h{letter-spacing:-.02em;margin:8px 0 4px;font-size:22px}.tool-head{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px;display:flex}.intro{color:var(--ink-2);max-width:40em;margin:8px 0 0;font-size:15px}.trust{border:1px solid var(--line);height:32px;color:var(--ink-2);white-space:nowrap;background:var(--white);border-radius:999px;flex:none;align-items:center;margin-top:12px;padding:0 12px;font-size:13px;display:inline-flex}.stack-work{flex-direction:column;gap:16px;margin-top:16px;display:flex}.tool-drop{cursor:default;min-height:200px}.tool-drop.has-file{border-style:solid;min-height:240px;padding:12px}.drop-ico{border:1px solid var(--line);background:var(--surface);width:56px;height:56px;color:var(--ink-2);border-radius:999px;place-items:center;display:grid}.drop-ico.sm{flex-shrink:0;width:40px;height:40px}.drop-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;display:flex}.drop-actions .btn{width:auto;min-width:140px;padding:0 16px}.preview-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);place-items:center;width:100%;min-height:220px;display:grid;overflow:hidden}.preview-box.in-drop{background:0 0;border:0;min-height:200px}.preview-box canvas,.preview-box img{max-width:100%;height:auto}.preview-checker{background-color:var(--white);background-image:linear-gradient(45deg,#eeeae3 25%,#0000 25%),linear-gradient(-45deg,#eeeae3 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#eeeae3 75%),linear-gradient(-45deg,#0000 75%,#eeeae3 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.preview-sheet{background:#ddd8cf;padding:16px}.preview-circle{background:var(--accent-soft)}.preview-ascii{align-items:stretch;padding:12px;overflow:auto}.tool-grid{flex-direction:column;gap:16px;margin-top:16px;display:grid}.tool-grid>*{min-width:0}.ctrl-card,.controls{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:14px;padding:16px;display:flex}.panel-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;display:flex}.panel-head h2{letter-spacing:-.015em;margin:0;font-size:18px}.live-state{border:1px solid var(--line);min-height:28px;color:var(--ink-2);background:var(--surface);white-space:nowrap;border-radius:999px;align-items:center;padding:0 9px;font-size:12px;display:inline-flex}.ctrl-card label,.controls label{flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}.ctrl-card input[type=range],.ctrl-card input[type=number],.ctrl-card input[type=text],.ctrl-card select,.ctrl-card textarea,.controls input[type=range],.controls input[type=number],.controls input[type=text],.controls select,.controls textarea{border:1px solid var(--line);border-radius:var(--btn-r);background:var(--surface);height:44px;accent-color:var(--accent);padding:0 10px}.ctrl-card textarea,.controls textarea{height:88px;padding:10px}.ctrl-card input[type=color]{border:1px solid var(--line);border-radius:var(--btn-r);background:var(--white);width:44px;height:44px;padding:4px}.file-bar{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.file-bar .mute{overflow-wrap:anywhere;flex:100%;margin:0}.text-btn{color:var(--accent);cursor:pointer;background:0 0;border:0;height:44px;padding:0;font-weight:600}.seg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);gap:4px;margin-top:16px;padding:4px;display:flex;overflow-x:auto}.seg-btn{min-height:44px;color:var(--ink-2);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:6px;flex:1;padding:0 12px}.seg-btn[aria-selected=true]{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line);font-weight:600}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line);background:var(--white);cursor:pointer;border-radius:999px;min-height:44px;padding:0 14px}.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}.swatches{align-items:center;gap:10px;display:flex}.swatch{border:1px solid var(--line);cursor:pointer;border-radius:999px;width:44px;height:44px}.swatch.on{outline:2px solid var(--accent);outline-offset:2px}.nine{grid-template-columns:repeat(3,44px);gap:6px;display:grid}.nine-cell{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:4px;width:44px;height:44px}.nine-cell.on{background:var(--accent);border-color:var(--accent)}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.ratio{border:1px solid var(--line);border-radius:var(--btn-r);background:var(--white);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:64px;height:56px;padding:0 10px;font-size:12px;display:inline-flex}.ratio.on{border-color:var(--accent);background:var(--accent-soft)}.ratio-box{border:1.75px solid;border-radius:1px;display:block}.pad-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.pad-btn{border:1px solid var(--line);border-radius:var(--btn-r);background:var(--white);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;height:72px;font-size:13px;font-weight:600;display:flex}.pad-btn:hover{background:#efebe4}.stats{grid-template-columns:1fr 1fr;gap:8px;display:grid}.stat{border:1px solid var(--line);border-radius:var(--btn-r);background:var(--surface);flex-direction:column;gap:2px;padding:10px 12px;display:flex}.compare{grid-template-columns:1fr 1fr;gap:8px;width:100%;padding:8px;display:grid}.compare figure{margin:0}.compare figcaption{color:var(--mute);text-align:center;margin-top:6px;font-size:12px}.icon-grid{flex-wrap:wrap;justify-content:center;gap:12px;padding:16px;display:flex}.icon-grid img{background:var(--surface);border:1px solid var(--line);border-radius:6px}.thumb-strip{gap:8px;display:flex;overflow-x:auto}.thumb-strip img{border:1px solid var(--line);border-radius:4px;width:auto;height:64px}.grid-preview{gap:4px;width:min(100%,360px);display:grid}.grid-preview img{width:100%}.hex-chip{letter-spacing:.02em;align-items:center;gap:12px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:22px;display:flex}.hex-swatch{border-radius:var(--btn-r);border:1px solid var(--line);width:44px;height:44px}.related{margin-top:32px}.related h2,.faq h2{margin:0 0 12px;font-size:16px}.related-grid{grid-template-columns:1fr;gap:8px;display:grid}.related-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);align-items:center;gap:12px;min-height:64px;padding:8px 12px;display:flex}.related-card:hover{background:#efebe4}.related-card strong{font-size:15px;display:block}.related-card p{color:var(--mute);margin:0;font-size:13px}.faq{max-width:40em;margin-top:32px}.faq details{border-bottom:1px solid var(--line);padding:8px 0}.faq summary{cursor:pointer;align-items:center;min-height:44px;font-weight:600;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";color:var(--accent);margin-left:auto;padding-left:12px;font-size:18px;font-weight:600;transition:content .1s}.faq details[open] summary:after{content:"−"}.faq details p{color:var(--ink-2);margin:0 0 8px}@media (min-width:720px){.related-grid{grid-template-columns:1fr 1fr}}@media (min-width:1024px){.related-grid{grid-template-columns:1fr 1fr 1fr}}.btn{border-radius:var(--btn-r);background:var(--accent);height:44px;color:var(--white);cursor:pointer;border:0;width:100%;font-weight:600}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-sec{background:var(--white);color:var(--ink);border:1px solid var(--line)}.dock{padding:12px var(--pad)calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);z-index:15;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 24px #2a27240a}.desk-dl{display:none}@media (min-width:1024px){.tool-grid{grid-template-columns:minmax(0,1.65fr) minmax(320px,.9fr);align-items:start;gap:24px;margin-top:24px}.tool-grid .preview-box{min-height:clamp(460px,58vh,680px)}.tool-grid .preview-box>img,.tool-grid .preview-box>canvas{object-fit:contain;max-height:68vh}.tool-grid .ctrl-card,.tool-grid .controls{position:sticky;top:88px}.dock{display:none}.desk-dl{display:block}.page-with-dock{padding-bottom:48px}}@media (max-width:1023px){.page-with-dock{padding-bottom:96px}}.legal{max-width:40em}.legal h1{font-size:28px}.err{color:var(--danger);font-size:14px}.ok{color:var(--ok)}.search-icon{display:none}@media (min-width:720px){.search-icon{pointer-events:none;color:var(--mute);display:block;position:absolute;top:11px;left:10px}}.hero-title{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.hero-title h1{margin:0}.count-chip{border:1px solid var(--line);background:var(--white);height:28px;color:var(--ink-2);white-space:nowrap;border-radius:999px;align-items:center;padding:0 12px;font-size:13px;font-weight:600;display:inline-flex}.tab{align-items:center;gap:6px;display:inline-flex}.tab-count{background:var(--surface);border:1px solid var(--line);color:var(--mute);border-radius:999px;padding:3px 6px;font-size:11px;line-height:1}.tab[aria-selected=true] .tab-count{background:var(--white);border-color:var(--accent);color:var(--accent)}.tool-grid-cards{grid-template-columns:1fr;gap:10px;margin-top:20px;display:grid}.tool-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);align-items:center;gap:14px;min-height:76px;padding:12px 14px;transition:background .15s,border-color .15s;display:flex;position:relative}.tool-card:hover{background:#efebe4;border-color:#d8d2c8}.tool-card-top{flex:none;align-items:flex-start;gap:10px;display:flex}.tool-card .ico{width:44px;height:44px}.tool-card h2{letter-spacing:-.01em;margin:0;font-size:16px;font-weight:600}.tool-card p{color:var(--mute);margin:2px 0 0;font-size:13px;line-height:1.4}.pop-tag{color:var(--accent);background:var(--accent-soft);white-space:nowrap;border:1px solid #cfe0e4;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600;line-height:1.6;position:absolute;top:12px;right:12px}.tool-card .card-arrow{position:absolute;bottom:10px;right:12px}.tool-card h2{padding-right:64px}.card-arrow{color:var(--mute);flex:none;font-size:18px}@media (min-width:720px){.tool-grid-cards{grid-template-columns:1fr 1fr}}@media (min-width:1024px){.tool-grid-cards{grid-template-columns:1fr 1fr 1fr}}.preview-wrap{width:100%;position:relative}.preview-wrap.in-drop{background:0 0;border:0}.compare-toggle{z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:var(--btn-r);padding:3px;display:flex;position:absolute;top:10px;right:10px;box-shadow:0 2px 8px #2a27240f}.compare-toggle button{min-height:44px;color:var(--ink-2);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:0 12px;font-size:13px;font-weight:600}.compare-toggle button.on{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line)}.field{flex-direction:column;gap:8px;display:flex}.field-label{font-size:14px;font-weight:600}.field-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.hint{color:var(--mute);font-size:12px;font-weight:400;line-height:1.45}.ctrl-card label{flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}.dl-area{border-top:1px solid var(--line);flex-direction:column;gap:10px;padding-top:14px;display:flex}.output-summary{color:var(--mute);justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;display:flex}.output-summary strong{max-width:72%;color:var(--ink-2);text-align:right;overflow-wrap:anywhere;font-weight:600;line-height:1.45}.out-info{color:var(--ok);text-align:center;margin:0;font-size:13px}.seg{margin-top:0}.kbd-hint{border:1px solid var(--line);height:20px;color:var(--mute);pointer-events:none;background:var(--surface);border-radius:4px;padding:0 6px;font-size:11px;line-height:18px;display:none;position:absolute;top:10px;right:10px}@media (min-width:720px){.search-input:not(:focus)+.kbd-hint{align-items:center;display:inline-flex}}.search-results{max-width:var(--max);padding:8px var(--pad)12px;flex-direction:column;gap:4px;margin:0 auto;display:flex}.search-results .row{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-height:52px;padding:8px 12px}.search-results .row:hover{background:#efebe4}.sm-ico{width:34px;height:34px}.sm-ico svg{width:18px;height:18px}.related-card{min-height:72px}.related-card .grow{min-width:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){.tool-card,.compare-toggle button{transition:none}.tool-card:active{transform:none}}.tool-body{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:28px;padding:20px 22px}.tool-body>*{max-width:52rem}.tool-body h2{font-family:var(--font-serif),Georgia,serif;letter-spacing:-.01em;margin:20px 0 8px;font-size:19px;font-weight:600}.tool-body h2:first-child{margin-top:0}.tool-body p,.tool-body li{color:var(--ink-2);font-size:15px;line-height:1.65}.tool-body ol,.tool-body ul{flex-direction:column;gap:6px;margin:8px 0 0;padding-left:20px;display:flex}.tool-body li::marker{color:var(--accent)}@media (min-width:720px){.tool-body{padding:24px 28px}}.prose{max-width:44em;margin-top:24px}.prose h1{font-family:var(--font-serif),Georgia,serif;letter-spacing:-.02em;margin:0 0 8px;font-size:30px;line-height:1.2}.meta-line{color:var(--mute);margin:0 0 20px;font-size:14px}.prose h2{font-family:var(--font-serif),Georgia,serif;letter-spacing:-.01em;margin:32px 0 10px;font-size:22px}.prose h3{margin:24px 0 8px;font-size:17px}.prose p{color:var(--ink-2);margin:0 0 14px;font-size:16px;line-height:1.7}.prose ul,.prose ol{color:var(--ink-2);flex-direction:column;gap:8px;margin:0 0 16px;padding-left:22px;font-size:16px;line-height:1.6;display:flex}.prose li::marker{color:var(--accent)}.prose a{color:var(--accent);text-underline-offset:3px;font-weight:600;-webkit-text-decoration:underline #2f6f7e59;text-decoration:underline #2f6f7e59}.prose a:hover{-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.prose strong{color:var(--ink)}.prose blockquote{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius)var(--radius)0;color:var(--ink-2);margin:0 0 16px;padding:12px 16px;font-size:15px}.prose table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:14px}.prose th,.prose td{text-align:left;border-bottom:1px solid var(--line);padding:8px 10px}.prose th{color:var(--ink);font-weight:600}.prose td{color:var(--ink-2)}.prose code{font-family:var(--font-mono,monospace);background:var(--surface);border-radius:4px;padding:2px 6px;font-size:13px}.cta-line{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:28px;padding:14px 16px;font-size:15px}.blog-list{flex-direction:column;gap:10px;margin-top:20px;display:flex}.blog-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);flex-direction:column;gap:6px;padding:16px 18px;transition:background .15s;display:flex}.blog-card:hover{background:#efebe4}.blog-card h2{letter-spacing:-.01em;margin:0;font-size:18px}.blog-card p{color:var(--mute);margin:0;font-size:14px;line-height:1.5}.blog-card .meta-line{margin:0;font-size:12px}@media (min-width:720px){.blog-list{gap:12px}.blog-card{padding:20px 24px}}