:root{color-scheme:light;--bg:#fff;--fg:#14171a;--muted:#5b6670;--line:#e3e7ea;--accent:#1763d6;--accent-fg:#fff;--panel:#f7f9fa;--ok:#0a7a42;--ok-bg:#e8f6ee;--ok-line:#bfe3ce;--ai:#6b3fd0;--ai-bg:#f1ecfd;--ai-line:#d8cbf7}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0f1316;--fg:#e8edf1;--muted:#98a4ae;--line:#242c33;--accent:#5a9bff;--accent-fg:#0f1316;--panel:#161c21;--ok:#6fd99b;--ok-bg:#12291d;--ok-line:#1f4a33;--ai:#b69aff;--ai-bg:#1e1830;--ai-line:#382a5c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:860px;margin:0 auto;padding:24px 16px 64px}
/* Directory pages (home, /tools, category hubs) are a board of cards and want the
   whole screen. Tool pages keep the 860px reading width - a dropzone, a row of
   controls and a result image get harder to use, not easier, when stretched. */
body.wide main{max-width:1320px}
a{color:var(--accent)}
h1{font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.25;margin:.2em 0 .3em}
h2{font-size:1.2rem;margin:1.8em 0 .4em}
.lede{color:var(--muted);font-size:1.05rem;margin-top:0}
.note{color:var(--muted);font-size:.9rem}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.brand{font-weight:700;text-decoration:none;color:var(--fg)}
.site-head nav a{margin-left:16px;font-size:.95rem}
.site-foot{border-top:1px solid var(--line);padding:20px 16px;color:var(--muted);font-size:.88rem;text-align:center}
/* Explicit column counts rather than auto-fit, so the board lands on a whole
   number of cards per row instead of whatever happens to fit. align-items:start
   keeps each panel its own height instead of stretching it to the tallest in the
   row. (CSS columns balance the heights better but put one column at twice the
   height of its neighbours here, because a panel cannot be split.) */
.cats{display:grid;gap:18px;grid-template-columns:1fr;align-items:start;margin-top:24px}
@media(min-width:620px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1240px){.cats{grid-template-columns:repeat(4,1fr)}}
.cat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;transition:box-shadow 0.2s ease, transform 0.2s ease}
.cat:hover{box-shadow:0 6px 16px rgba(0,0,0,0.06);transform:translateY(-2px)}
.cat h2{margin-top:0;font-size:1.05rem}
.cat ul,.tool-list{margin:0;padding-left:18px}
.soon{color:var(--muted);list-style:none;margin-left:-18px}
/* Enhanced Dropzone UX */
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:48px 24px;text-align:center;background:var(--panel);margin:24px 0;transition:all 0.2s ease;position:relative}
.dropzone:hover{border-color:var(--accent);background:var(--bg)}
.dropzone.over{border-color:var(--accent);background:var(--ok-bg);transform:scale(1.02)}
.dropzone input[type=file]{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;cursor:pointer}
.dropzone label{color:var(--accent);font-weight:600;pointer-events:none;text-decoration:underline}
.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:inset 0 1px 3px rgba(0,0,0,0.02)}
.controls label{display:flex;gap:8px;align-items:center;font-size:.92rem}
.controls input[type=number]{width:100px}
.controls input,.controls select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);transition:border-color 0.2s}
.controls input:focus,.controls select:focus{outline:none;border-color:var(--accent)}
/* Modern Range Sliders */
.controls input[type=range]{-webkit-appearance:none;width:160px;background:transparent;padding:0;border:none}
.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:-6px;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.controls input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:var(--line);border-radius:2px}
.controls input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--ai-line)}
.result{margin-top:24px}
.result img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.stats{font-size:.95rem;color:var(--muted)}
.download{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-fg);padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:background-color 0.2s, transform 0.1s;border:none;cursor:pointer}
.download:hover{background:var(--ok);color:#fff}
.download:active{transform:scale(0.98)}
/* Loading state */
.loading-indicator{display:inline-block;width:20px;height:20px;border:3px solid var(--line);border-radius:50%;border-top-color:var(--accent);animation:spin 1s ease-in-out infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.error{color:#c0392b;background:#fceeee;border:1px solid #f5c6cb;padding:12px;border-radius:8px;margin:12px 0;font-weight:500}
.spec{border-collapse:collapse;margin:24px 0;width:100%;font-size:.95rem;box-shadow:0 1px 3px rgba(0,0,0,0.05);border-radius:8px;overflow:hidden}
.spec caption{text-align:left;font-weight:600;padding-bottom:10px}
.spec th,.spec td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.spec th{background:var(--panel);width:40%}
.related ul{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0;list-style:none}
.related li a{font-size:.92rem;padding:6px 12px;background:var(--panel);border:1px solid var(--line);border-radius:20px;text-decoration:none;transition:all 0.2s}
.related li a:hover{background:var(--bg);border-color:var(--accent);color:var(--accent)}
.packs{list-style:none;padding:0}
.packs li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;background:var(--panel);transition:transform 0.2s}
.packs li:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.per{color:var(--muted);font-size:.9rem}
.buy{background:var(--accent);color:var(--accent-fg);border:0;border-radius:8px;padding:10px 20px;font-weight:600;cursor:pointer;transition:background 0.2s}
.buy:hover{background:var(--ok)}
.ad{margin:24px 0;min-height:1px}
@media (max-width:520px){.controls{flex-direction:column;align-items:stretch}}
.stage{position:relative;display:block;width:100%;line-height:0;touch-action:none;overflow:hidden;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.1)}
.stage canvas{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8' fill='%23eee'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23eee'/%3E%3C/svg%3E")}
.cropbox{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 9999px rgba(0,0,0,.5);cursor:move;border-radius:4px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.btnrow button{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:10px 16px;font-size:.92rem;cursor:pointer;transition:all 0.2s}
.btnrow button:hover{border-color:var(--accent);background:var(--bg)}
.swatches{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));list-style:none;padding:0;margin:16px 0}
.swatch{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:transform 0.2s}
.swatch:hover{transform:translateY(-2px)}
.swatch .chip{height:64px}
.swatch .vals{padding:10px;font-size:.8rem;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.swatch .share{color:var(--muted);display:block;margin-top:4px}
.meta{border-collapse:collapse;width:100%;font-size:.92rem;margin:16px 0}
.meta th,.meta td{border:1px solid var(--line);padding:8px 12px;text-align:left;word-break:break-word}
.meta th{background:var(--panel);width:42%;font-weight:600}
.copybox{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg)}

/* ---- header: brand mark + theme switch ---------------------------------- */
.site-head nav{display:flex;align-items:center;gap:18px}
.site-head nav a{margin-left:0}
.brand{display:inline-flex;align-items:center;gap:9px}
.brandmark{width:22px;height:22px;color:var(--accent);flex:none}
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);cursor:pointer;flex:none;transition:all 0.2s}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}
.themebtn .ic{width:20px;height:20px}
.i-sun{display:none}
:root[data-theme="dark"] .i-sun{display:block}
:root[data-theme="dark"] .i-moon{display:none}

/* ---- badges ------------------------------------------------------------- */
.badge{display:inline-block;min-width:3.9rem;padding:3px 8px;border:1px solid transparent;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.04em;line-height:1.55;text-align:center;text-transform:uppercase;white-space:nowrap;flex:none}
.b-free{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.b-ai{background:var(--ai-bg);color:var(--ai);border-color:var(--ai-line)}
.b-soon{background:var(--panel);color:var(--muted);border-color:var(--line)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0 0;color:var(--muted);font-size:.88rem}

/* ---- tool cards ---------------------------------------------------------- */
ul.tcards{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.tcard>a,.tcard .tc-inner{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;height:100%;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:inherit;text-decoration:none;transition:all 0.2s ease}
.tcard>a:hover{border-color:var(--accent);background:var(--panel);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.tcard>a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tc-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--accent);flex:none;transition:transform 0.2s}
.tcard>a:hover .tc-ic{transform:scale(1.05)}
.tc-ic .ic{width:22px;height:22px}
.tc-body{min-width:0}
.tc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tc-name{font-weight:600;font-size:1.02rem}
.tc-blurb{display:block;margin-top:4px;color:var(--muted);font-size:.88rem;line-height:1.5}
.tcard.is-soon .tc-inner{opacity:.65;cursor:default}
.tcard.is-soon .tc-ic{color:var(--muted)}
.tcard.empty{color:var(--muted);font-size:.9rem;padding:8px 2px}

@media(min-width:1240px){
  .cats>.cat:last-child:nth-child(4n+1){grid-column:span 4}
  .cats>.cat:last-child:nth-child(4n+2){grid-column:span 3}
  .cats>.cat:last-child:nth-child(4n+3){grid-column:span 2}
  .cats>.cat:last-child:not(:nth-child(4n)) ul.tcards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}
@media(min-width:980px) and (max-width:1239.98px){
  .cats>.cat:last-child:nth-child(3n+1){grid-column:span 3}
  .cats>.cat:last-child:nth-child(3n+2){grid-column:span 2}
  .cats>.cat:last-child:not(:nth-child(3n)) ul.tcards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}
@media(min-width:620px) and (max-width:979.98px){
  .cats>.cat:last-child:nth-child(odd){grid-column:span 2}
  .cats>.cat:last-child:nth-child(odd) ul.tcards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}

body.wide main>ul.tcards,body.wide main>section>ul.tcards,body.wide details.wip ul.tcards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cat h2 a{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.cat h2 a:hover span{text-decoration:underline}
.cat-ic{width:22px;height:22px;color:var(--accent);flex:none}
.h1-ic{width:.92em;height:.92em;margin-right:.38em;vertical-align:-.08em;color:var(--accent)}
details.wip{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
details.wip summary{cursor:pointer;color:var(--muted);font-size:.92rem;font-weight:500;padding:4px}
details.wip[open] summary{margin-bottom:12px}

/* ---- the badge on the tool page itself ---------------------------------- */
.toolmark{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:.9rem;color:var(--muted)}
.toolmark-ic{width:22px;height:22px;color:var(--accent);flex:none}
.toolmark a{color:var(--muted);text-decoration:none;font-weight:500}
.toolmark a:hover{color:var(--accent);text-decoration:underline}
.cat .more{margin:12px 0 0;font-size:.9rem;font-weight:500}
.cat .more a{text-decoration:none}
.cat .more a:hover{text-decoration:underline}

/* ---- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs{margin-bottom:16px;font-size:.88rem;color:var(--muted)}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li{display:inline-flex;align-items:center}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--accent);text-decoration:underline}
.breadcrumbs .sep{margin-left:6px;opacity:0.6}
.breadcrumbs [aria-current="page"]{color:var(--fg);font-weight:500}

/* ---- controls that a variant page opened on ------------------------------ */
.controls label.focus{position:relative;padding:8px 12px;margin:-8px -6px;border:2px solid var(--accent);border-radius:10px;background:var(--ok-bg)}
.controls input[type=color]{width:52px;height:36px;padding:2px;border-radius:6px;cursor:pointer}
.controls input[type=text]{min-width:200px}
.controls output{min-width:3em;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem;font-weight:500}

/* ---- histogram + tile grid ---------------------------------------------- */
img.hist{width:100%;max-width:512px;height:auto;border:1px solid var(--line);border-radius:10px;background:#111;box-shadow:inset 0 2px 10px rgba(0,0,0,0.5)}
ol.tiles{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:0;margin:16px 0}
ol.tiles li{display:flex;flex-direction:column;gap:10px;align-items:stretch}
ol.tiles img{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;display:block;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
ol.tiles .download{text-align:center;padding:8px 12px;font-size:.88rem}