:root{--paper: #f6f7f9;--surface: #ffffff;--ink: #16192b;--muted: #5b6275;--line: #dce0e8;--blue: #2b59e0;--blue-dark: #1f46bf;--pixel: #ffb224;--error: #b42318;--font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;--font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;--font-code: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;--step--1: .875rem;--step-0: 1rem;--step-1: 1.25rem;--step-2: 1.625rem;--step-3: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);--radius-s: 6px;--radius-m: 10px;--radius-l: 16px;--wrap: 1120px}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.6}h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}h1{font-size:var(--step-3);font-weight:700}h2{font-size:var(--step-2);font-weight:700}h3{font-size:var(--step-1);font-weight:500}p{margin:0 0 1em}a{color:var(--blue);text-underline-offset:.18em}a:hover{color:var(--blue-dark)}img{max-width:100%}:focus-visible{outline:3px solid var(--pixel);outline-offset:2px;border-radius:2px}.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:10}.skip-link:focus{left:1rem}.lede{font-size:var(--step-1);color:var(--muted);max-width:42rem}.site-header{background:var(--surface);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;flex-wrap:wrap}.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink);text-decoration:none}.logo-mark{border-radius:3px;background:var(--ink);padding:3px;box-sizing:content-box}.logo-mark .px-on{fill:var(--paper)}.logo-mark .px-off{fill:transparent}.logo-mark .px-accent{fill:var(--pixel)}.nav{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}.nav a{display:block;padding:.4rem .75rem;border-radius:var(--radius-s);color:var(--muted);text-decoration:none;font-weight:500}.nav a:hover{color:var(--ink);background:var(--paper)}.nav a.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue);border-radius:0}.site-footer{margin-top:5rem;border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:var(--step--1)}.footer-inner{display:flex;justify-content:space-between;gap:1rem;padding-top:1.5rem;padding-bottom:1.5rem;flex-wrap:wrap}.footer-inner p{margin:0;max-width:36rem}.footer-links{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}.footer-links a{color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font:600 var(--step-0) / 1.2 var(--font-body);text-decoration:none;cursor:pointer}.btn:hover{border-color:var(--ink);color:var(--ink)}.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}.btn:disabled{opacity:.6;cursor:progress}.link-btn{border:0;background:none;padding:0;color:var(--blue);font:600 var(--step--1) var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}input[type=text],select{width:100%;min-height:44px;padding:.5rem .75rem;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font:inherit}input[type=text]:focus,select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px #2b59e033}input[type=color]{width:56px;height:40px;padding:2px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);cursor:pointer}input[type=range]{width:100%;accent-color:var(--blue)}.hero{background:var(--surface);border-bottom:1px solid var(--line)}.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center;padding-top:4rem;padding-bottom:4rem}.hero-copy h1{max-width:16ch}.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}.hero-tabs{background:#e4e7ed;border-radius:var(--radius-l);padding:1.25rem 1.25rem 0}.hero-tab{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;margin-bottom:.5rem;background:#eef0f4;border-radius:var(--radius-m)}.hero-tab.is-active{background:var(--surface);box-shadow:0 1px 0 var(--line)}.hero-tab-icon{width:28px;height:28px;flex:none;border-radius:5px;background-image:linear-gradient(90deg,rgb(255 255 255 / .18) 1px,transparent 1px),linear-gradient(rgb(255 255 255 / .18) 1px,transparent 1px);background-size:7px 7px;image-rendering:pixelated}.hero-tab-line{height:10px;border-radius:5px;background:var(--line);flex:1;max-width:70%}.hero-tab.is-active .hero-tab-line{background:#c9cfdb}.hero-tabs-caption{margin:0;padding:1rem .25rem 1.25rem;font-size:var(--step--1);color:var(--muted)}.section{padding-top:3.5rem}.section-title{font-size:var(--step-1);font-weight:700;margin-bottom:1rem}.tool-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.tool-link{display:block;height:100%;padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);text-decoration:none;color:var(--ink)}.tool-link:hover{border-color:var(--blue);color:var(--ink)}.tool-link-title{display:block;font-family:var(--font-display);font-size:var(--step-1);font-weight:700;margin-bottom:.4rem}.tool-link-summary{color:var(--muted)}.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.post-list li{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.post-list a{font-weight:600;color:var(--ink);text-decoration:none}.post-list a:hover{color:var(--blue);text-decoration:underline}.post-list time{color:var(--muted);font-size:var(--step--1)}.page{padding-top:2.5rem}.page--narrow{max-width:760px}.page-head{margin-bottom:2rem}.page-head time{color:var(--muted)}.crumbs{margin-bottom:.5rem;font-size:var(--step--1)}.not-found{padding-top:5rem}.prose{font-size:1.0625rem}.prose h2{font-size:var(--step-1);margin-top:2em}.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em}.prose li{margin-bottom:.35em}.prose code{font-family:var(--font-code);font-size:.88em;background:#e9ecf2;padding:.1em .35em;border-radius:4px}.prose pre{background:var(--ink);color:#e7e9f0;padding:1rem 1.25rem;border-radius:var(--radius-m);overflow-x:auto}.prose pre code{background:none;padding:0;color:inherit}.prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:var(--step--1);display:block;overflow-x:auto}.prose th,.prose td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}.prose th{font-weight:600}.try-tool{margin-top:2.5rem}.blog-list{list-style:none;margin:0;padding:0}.blog-list li{padding:1.5rem 0;border-top:1px solid var(--line)}.blog-list time{color:var(--muted);font-size:var(--step--1)}.blog-list h2{font-size:var(--step-1);margin:.25rem 0 .4rem}.blog-list h2 a{color:var(--ink);text-decoration:none}.blog-list h2 a:hover{color:var(--blue);text-decoration:underline}.blog-list p{color:var(--muted);margin:0}.related{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}.related h2{font-size:var(--step-1)}.ad-slot{margin:2.5rem 0;min-height:100px}.tool{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:2rem;align-items:start}.tool-input{position:sticky;top:1rem;display:grid;gap:1rem}.tool-output{min-width:0;display:grid;gap:1.5rem}.empty-note{color:var(--muted);padding:2rem;border:1px dashed var(--line);border-radius:var(--radius-m);text-align:center;margin:0}.source-info{font-size:var(--step--1);color:var(--muted);margin:0;overflow-wrap:anywhere}.notice{padding:.75rem 1rem;border-radius:var(--radius-s);margin:0}.notice--error{background:#fef3f2;color:var(--error);border:1px solid #fecdca}.dropzone{display:grid;justify-items:center;gap:.5rem;text-align:center;padding:2rem 1.25rem;background:var(--surface);border:2px dashed #b8bfcc;border-radius:var(--radius-m)}.dropzone.is-over{border-color:var(--blue);background:#eef2fd}.dropzone-title{font-family:var(--font-display);font-size:var(--step-1);font-weight:700;margin:0}.dropzone-hint{color:var(--muted);font-size:var(--step--1);margin:0 0 .5rem}.controls{display:grid;gap:1.1rem;margin:0;padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}.control{display:grid;gap:.4rem}.control-label{font-weight:600;font-size:var(--step--1)}.control-help{font-size:var(--step--1);color:var(--muted)}.text-big{font-size:1.5rem!important;font-weight:600}.segmented{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}.segmented button{flex:1 1 100px;min-height:40px;padding:.4rem .7rem;border:0;background:var(--surface);color:var(--muted);font:500 var(--step--1) var(--font-body);cursor:pointer}.segmented button.is-active{background:var(--ink);color:#fff}.bg-row,.color-pair{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.check{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--step--1);cursor:pointer}.check input{width:18px;height:18px;accent-color:var(--blue)}.tab-previews{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.tab-strip{display:flex;gap:2px;padding:.5rem .5rem 0;border-radius:var(--radius-m) var(--radius-m) 0 0;overflow:hidden}.tab-strip--light{background:#dfe3ea}.tab-strip--dark{background:#1f2230}.tab{display:flex;align-items:center;gap:.5rem;min-width:0;padding:.5rem .75rem;border-radius:8px 8px 0 0;font-size:.8rem;white-space:nowrap}.tab span:last-child{overflow:hidden;text-overflow:ellipsis}.tab img,.tab-empty{width:16px;height:16px;flex:none}.tab-empty{border-radius:3px;background:currentColor;opacity:.25}.tab-strip--light .tab{background:#fff;color:var(--ink)}.tab-strip--dark .tab{background:#35394a;color:#e7e9f0}.tab-strip .tab--inactive{background:transparent;opacity:.7}.results{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:1.5rem}.results-title{font-size:var(--step-1)}.size-grid{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.size-cell{text-align:center}.size-frame{display:grid;place-items:center;height:120px;border:1px solid var(--line);border-radius:var(--radius-s);margin-bottom:.5rem}.checker{background-color:#fff;background-image:conic-gradient(#eceef2 25%,transparent 0 50%,#eceef2 0 75%,transparent 0);background-size:12px 12px}.pixelated{image-rendering:pixelated}.size-name{font-weight:600;margin:0}.size-use{font-size:var(--step--1);color:var(--muted);margin:0 0 .25rem}.download-row{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.control--inline{flex:1 1 220px;max-width:320px}.download-actions{display:flex;gap:.75rem;flex-wrap:wrap}.snippet{margin-top:1.25rem}.snippet-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}.snippet h3{font-size:var(--step-0);font-family:var(--font-body);font-weight:600}.snippet pre{margin:0 0 .75rem;padding:1rem 1.25rem;background:var(--ink);color:#e7e9f0;border-radius:var(--radius-s);overflow-x:auto;font:.82rem/1.7 var(--font-code)}.snippet-note{font-size:var(--step--1);color:var(--muted);margin:0}@media(max-width:860px){.hero-inner{grid-template-columns:1fr;gap:2rem;padding-top:2.5rem;padding-bottom:2.5rem}.tool{grid-template-columns:1fr}.tool-input{position:static}}@media(max-width:520px){.tab-previews{grid-template-columns:1fr}.results{padding:1rem}.download-actions .btn{flex:1 1 100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.size-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem 1rem}.checker-tool{display:grid;gap:1.5rem;max-width:880px}.url-form{display:grid;gap:.4rem;padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}.url-row{display:flex;gap:.75rem;flex-wrap:wrap}.url-row input{flex:1 1 260px;font-size:1.1rem}.checker-results{display:grid;gap:1.5rem}.site-host{font-family:var(--font-display);font-size:var(--step-1);font-weight:700;margin:0;overflow-wrap:anywhere}.site-summary{display:grid;gap:.5rem}.site-summary .tab-previews{margin-top:.5rem}.checklist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}.check-item{display:flex;gap:.75rem;align-items:baseline;padding:.7rem .9rem;border-radius:var(--radius-s);border:1px solid var(--line)}.check-badge{flex:none;min-width:4.6rem;text-align:center;padding:.1rem .5rem;border-radius:999px;font-size:var(--step--1);font-weight:600}.check-item--pass .check-badge{background:#e7f6ec;color:#1a6b3a}.check-item--fail{border-color:#fecdca;background:#fffbfa}.check-item--fail .check-badge{background:#fee4e2;color:var(--error)}.check-item--warn .check-badge{background:#fff4d6;color:#8a5a00}.check-item--info .check-badge{background:#eef2fd;color:var(--blue-dark)}.found-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}.found-item{display:grid;grid-template-columns:72px 1fr auto;gap:1rem;align-items:center;padding:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}.found-thumb{width:72px;height:72px;margin:0}.found-thumb img{object-fit:contain}.found-info{min-width:0}.found-info p{margin:0}.found-title{font-weight:600}.found-meta{font-size:var(--step--1);color:var(--muted)}.found-url{font-family:var(--font-code);font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}.broken{margin-top:.75rem;font-size:var(--step--1)}.broken summary{cursor:pointer;color:var(--error);font-weight:600}.broken ul{padding-left:1.2em}.tool-help{max-width:760px;margin-top:3.5rem;padding-top:1rem;border-top:1px solid var(--line)}.tool-help h2:first-child{margin-top:1rem}.tool-help h3{font-size:var(--step-0);font-family:var(--font-body);font-weight:600;margin:1.5em 0 .4em}.related ul{padding-left:1.2em}.footer-tools{flex-wrap:wrap;flex-basis:100%;order:3}@media(max-width:560px){.found-item{grid-template-columns:56px 1fr}.found-thumb{width:56px;height:56px}.found-item .btn{grid-column:1 / -1}}.swatches{display:flex;flex-wrap:wrap;gap:.5rem}.swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}.swatch.is-active{box-shadow:0 0 0 2px var(--ink)}.controls>legend.control-label{float:left;width:100%;margin-bottom:.25rem;padding:0}.lang-menu{position:relative}.lang-menu summary{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.35rem .7rem;border:1px solid var(--line);border-radius:var(--radius-s);cursor:pointer;list-style:none;color:var(--muted);font-weight:500;font-size:var(--step--1);white-space:nowrap}.lang-menu summary::-webkit-details-marker{display:none}.lang-menu summary:hover,.lang-menu[open] summary{color:var(--ink);border-color:var(--ink)}.lang-menu ul{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;list-style:none;margin:0;padding:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:0 8px 24px #16192b1f}.lang-menu a{display:block;padding:.5rem .75rem;border-radius:var(--radius-s);color:var(--ink);text-decoration:none}.lang-menu a:hover{background:var(--paper)}.lang-menu a[aria-current]{font-weight:600;box-shadow:inset 3px 0 0 var(--blue)}@media(max-width:860px){.lang-menu ul{right:auto;left:0}}html[lang=ja]{--font-display: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif;--font-body: var(--font-display)}html[lang=ja] body{line-height:1.8}html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3{letter-spacing:0;line-height:1.35;word-break:auto-phrase}html[lang=ru]{--font-display: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", system-ui, sans-serif;--font-body: var(--font-display)}html[lang=ru] h1,html[lang=de] h1{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}