@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{--bg:#f6f8fc;--surface:#fff;--text:#172033;--muted:#758096;--line:#e8ecf3;--accent:#6558e8;--accent2:#8c82ff;--soft:#f0efff;--shadow:0 18px 55px rgba(29,38,73,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans','Noto Sans SC',sans-serif}a{color:inherit;text-decoration:none}.topbar{height:78px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#7568f4,#a69eff);color:white;font-size:22px;box-shadow:0 7px 18px #796df044}.brand b{font-size:16px;letter-spacing:.2px}.brand small{display:block;color:#9aa2b3;font-size:9px;letter-spacing:1.8px;margin-top:3px}.topbar nav{display:flex;gap:34px;color:#687187;font-size:13px}.topbar nav a:hover{color:var(--accent)}.top-actions{display:flex;align-items:center;gap:13px}.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);width:38px;height:38px;border-radius:12px;font-size:20px;cursor:pointer}.github-pill{font-size:12px;padding:11px 16px;background:#1d2435;color:#fff;border-radius:12px}.hero{max-width:1180px;margin:0 auto;padding:92px 30px 58px;min-height:455px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent);display:flex;align-items:center;gap:8px}.pulse{width:7px;height:7px;border-radius:50%;background:#6bd6a9;box-shadow:0 0 0 4px #6bd6a922}.hero h1{font-size:clamp(38px,5vw,61px);line-height:1.2;letter-spacing:-2px;margin:22px 0 17px;font-weight:800}.hero h1 em{font-style:normal;color:var(--accent)}.hero-copy>p{color:var(--muted);font-size:15px;line-height:1.9;margin:0 0 28px}.search-wrap{height:60px;background:var(--surface);border:1px solid #e7e8f4;box-shadow:0 10px 30px #4444770d;border-radius:17px;display:flex;align-items:center;padding:0 17px;gap:12px;max-width:560px}.search-wrap span{font-size:25px;color:var(--accent)}.search-wrap input{border:0;outline:0;flex:1;background:transparent;color:var(--text);font-size:14px;min-width:0}.search-wrap kbd{font-size:11px;color:#9ba2b2;border:1px solid var(--line);border-radius:6px;padding:3px 7px}.hero-meta{display:flex;gap:10px;align-items:center;margin-top:18px;color:#9aa2b3;font-size:11px;flex-wrap:wrap}.hero-art{height:300px;position:relative;display:grid;place-items:center}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-a{width:260px;height:260px;background:radial-gradient(circle at 35% 30%,#e9e5ff,#dcd8ff77 65%,transparent 70%)}.orb-b{width:190px;height:190px;border:1px solid #c9c1ff;transform:rotate(-25deg);border-radius:43% 57% 58% 42%}.hero-center{width:112px;height:112px;border-radius:34px;background:linear-gradient(145deg,#7064ed,#a59bff);box-shadow:0 25px 50px #7468e955;display:flex;align-items:center;justify-content:center;flex-direction:column;color:white;font-size:39px;z-index:1;transform:rotate(-8deg)}.hero-center small{font-size:8px;line-height:1.4;letter-spacing:2px;text-align:center}.float-card{position:absolute;z-index:2;background:#fff;border:1px solid #eef0f6;box-shadow:var(--shadow);padding:12px 15px;border-radius:15px;display:flex;align-items:center;gap:10px;min-width:175px}.float-card b{font-size:12px;display:block}.float-card small{font-size:10px;color:#9aa2b3}.mini-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:700}.purple{background:#f0edff;color:#7466e9}.mint{background:#e7faf2;color:#39b887}.orange{background:#fff1e5;color:#ee9c53}.check{margin-left:auto;color:#53c69a}.card-one{top:30px;left:3%}.card-two{right:0;top:112px}.card-three{bottom:25px;left:13%}.quick-stats{max-width:1120px;margin:0 auto 45px;padding:24px 35px;background:#fff;border:1px solid var(--line);border-radius:19px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 8px 30px #27345b08}.quick-stats div{text-align:center;border-right:1px solid var(--line)}.quick-stats div:last-child{border:0}.quick-stats b{font-size:25px;display:block;letter-spacing:-1px}.quick-stats b span{color:var(--accent)}.quick-stats small{display:block;color:#9aa2b3;font-size:11px;margin-top:4px}.section{max-width:1120px;margin:0 auto;padding:45px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.section-head h2,.about h2{font-size:29px;letter-spacing:-1px;margin:8px 0}.section-head p{margin:0;color:var(--muted);font-size:13px}.muted,.result-count{font-size:11px;color:#9aa2b3}.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.popular-card,.tool-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:18px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:13px;text-align:left;color:var(--text)}.popular-card:hover,.tool-card:hover{transform:translateY(-3px);border-color:#c9c3ff;box-shadow:0 12px 30px #45408b10}.tool-symbol{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--soft);color:var(--accent);font-size:19px;font-weight:700}.popular-card b,.tool-card b{font-size:13px;display:block}.popular-card small,.tool-card small{display:block;color:#9aa2b3;font-size:10px;margin-top:5px}.catalog-section{padding-top:68px}.catalog-layout{display:grid;grid-template-columns:190px 1fr;gap:24px}.category-nav{position:sticky;top:100px;align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:9px}.category-nav button{width:100%;border:0;background:transparent;padding:11px 12px;border-radius:10px;text-align:left;color:#727d91;font-size:12px;cursor:pointer;display:flex;justify-content:space-between}.category-nav button.active,.category-nav button:hover{background:var(--soft);color:var(--accent)}.category-nav small{color:#a5adbb}.tool-groups{min-width:0}.tool-group{margin-bottom:27px;scroll-margin-top:100px}.group-head{display:flex;align-items:center;gap:10px;margin:0 0 13px}.group-head .tool-symbol{width:35px;height:35px}.group-head h3{font-size:16px;margin:0}.group-head small{color:#a1a8b6;font-size:10px;margin-left:auto}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tool-card{padding:13px;border-radius:13px;gap:10px}.tool-card .tool-symbol{width:35px;height:35px;font-size:16px;border-radius:10px}.tool-card b{font-size:12px}.tool-card small{font-size:9px}.about{max-width:1120px;margin:55px auto 80px;padding:42px 48px;background:#22283a;color:white;border-radius:24px;display:flex;align-items:center;justify-content:space-between;gap:40px}.about .eyebrow{color:#aaa2ff}.about h2{font-size:32px;line-height:1.35}.about p{max-width:440px;color:#b8bfd0;font-size:13px;line-height:2}footer{border-top:1px solid var(--line);padding:25px max(5vw,24px);display:flex;align-items:center;justify-content:space-between;color:#9aa2b3;font-size:10px}footer .brand-mark{width:30px;height:30px;font-size:16px;border-radius:10px}footer .brand b{font-size:12px;color:var(--text)}.modal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:#11182bcc;backdrop-filter:blur(5px)}.modal-panel{position:relative;width:min(680px,100%);max-height:90vh;overflow:auto;background:var(--surface);border-radius:22px;padding:28px;box-shadow:0 30px 90px #0003}.modal-head{display:flex;justify-content:space-between;gap:20px}.modal-head h2{margin:8px 0;font-size:24px}.modal-head p{color:var(--muted);font-size:12px;margin:0}.tool-body{padding:24px 0;min-height:180px}.field-label{font-size:12px;font-weight:600;display:block;margin:0 0 8px}.tool-body textarea,.tool-body input,.tool-body select{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:12px;border-radius:11px;font:13px inherit;outline:none;margin-bottom:14px}.tool-body textarea{min-height:130px;resize:vertical}.tool-body textarea:focus,.tool-body input:focus,.tool-body select:focus{border-color:var(--accent)}.tool-actions{display:flex;gap:9px;flex-wrap:wrap}.primary-btn,.secondary-btn{border:0;border-radius:10px;padding:11px 17px;font-size:12px;cursor:pointer}.primary-btn{background:var(--accent);color:#fff}.secondary-btn{background:var(--soft);color:var(--accent)}.output-box{padding:14px;background:var(--bg);border:1px solid var(--line);border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;min-height:45px;margin-top:13px}.tool-note{font-size:11px;color:#9aa2b3;line-height:1.8;margin-top:12px}.modal-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:15px;color:#9aa2b3;font-size:10px}.empty{padding:35px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:14px;font-size:13px}.hidden{display:none!important}
body.dark{--bg:#111522;--surface:#1a2030;--text:#edf0fa;--muted:#a0a9bd;--line:#2b3347;--soft:#292747;--shadow:0 18px 55px #0004}body.dark .topbar{background:#171d2beF}body.dark .github-pill{background:#7569ef}body.dark .float-card{background:#20283a;border-color:#30394e}body.dark .quick-stats{background:var(--surface)}body.dark .about{background:#0c1020}body.dark .modal-backdrop{background:#050812dd}
@media(max-width:850px){.topbar nav{display:none}.hero{grid-template-columns:1fr;padding-top:65px}.hero-art{height:230px}.quick-stats,.section,.about{margin-left:20px;margin-right:20px}.popular-grid{grid-template-columns:repeat(2,1fr)}.catalog-layout{grid-template-columns:1fr}.category-nav{position:static;display:flex;overflow:auto;gap:4px}.category-nav button{white-space:nowrap;width:auto}.tool-grid{grid-template-columns:repeat(2,1fr)}.about{padding:30px;display:block}.about p{margin-top:20px}footer{gap:12px;flex-wrap:wrap}}
@media(max-width:520px){.topbar{height:65px;padding:0 17px}.github-pill{display:none}.hero{padding:52px 20px 35px}.hero h1{font-size:42px}.hero-art{height:205px}.float-card{transform:scale(.85)}.card-one{left:-4%}.card-two{right:-5%}.quick-stats{padding:19px 8px;grid-template-columns:repeat(2,1fr);gap:18px}.quick-stats div:nth-child(2){border:0}.section{padding:32px 0}.section-head h2{font-size:25px}.popular-grid{gap:9px}.popular-card{padding:12px;gap:8px}.popular-card .tool-symbol{width:34px;height:34px}.tool-grid{grid-template-columns:1fr}.catalog-section{padding-top:35px}.modal-panel{padding:20px}.about{margin-bottom:45px}footer{padding:22px}}

/* Phase 4: interaction and accessibility polish */
:focus-visible{outline:3px solid #8d83ff;outline-offset:3px}
button:disabled{opacity:.62;cursor:wait}
.ocr-progress{min-height:22px;margin-top:9px;color:var(--muted);font-size:11px;line-height:1.6}
.tool-body .tool-actions>*{flex:0 0 auto}
.modal-panel{overscroll-behavior:contain}
@media(max-width:520px){.modal{padding:10px}.modal-panel{width:100%;max-height:94vh;border-radius:17px;padding:17px}.modal-head h2{font-size:20px}.tool-body{padding:18px 0}.tool-body .tool-actions>*{flex:1 1 auto}.tool-body .primary-btn,.tool-body .secondary-btn{min-height:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Phase 6: readability, larger typography and consistent category icons */
:root { --muted:#626e83; }
body { font-size:16px; }
.topbar nav { font-size:15px; }
.brand b { font-size:18px; }
.brand small { font-size:11px; }
.hero-copy>p { font-size:17px; }
.hero-meta { font-size:13px; color:#68748a; }
.eyebrow { font-size:12px; letter-spacing:1.5px; }
.search-wrap input { font-size:16px; }
.search-wrap kbd { font-size:13px; }
.quick-stats small { font-size:14px; color:#68748a; }
.section-head p { font-size:15px; }
.muted,.result-count { font-size:14px; color:#68748a; }
.popular-card,.tool-card { gap:14px; padding:17px; }
.popular-card b,.tool-card b { font-size:15px; line-height:1.55; }
.popular-card small,.tool-card small { font-size:13px; line-height:1.6; color:#657187; }
.tool-symbol { width:46px; height:46px; font-size:21px; border-radius:14px; flex:0 0 46px; }
.tool-card .tool-symbol { width:42px; height:42px; flex-basis:42px; font-size:19px; }
.group-head .tool-symbol { width:42px; height:42px; }
.group-head h3 { font-size:19px; }
.group-head small { font-size:13px; color:#68748a; }
.category-nav { padding:10px; }
.category-nav button { font-size:15px; padding:12px 11px; min-height:48px; }
.category-nav small { font-size:13px; color:#68748a; }
.nav-category-label { display:flex; align-items:center; gap:10px; min-width:0; }
.nav-category-icon { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:9px; background:var(--soft); color:var(--accent); font-size:15px; font-weight:800; }
.about p { font-size:16px; line-height:1.9; }
footer { font-size:13px; }
.float-card b { font-size:14px; }
.float-card small { font-size:12px; color:#68748a; }
.modal-panel { padding:32px; }
.modal-head h2 { font-size:28px; }
.modal-head p { font-size:15px; line-height:1.7; }
.tool-body { font-size:16px; }
.field-label { font-size:15px; }
.tool-body textarea,.tool-body input,.tool-body select { font-size:16px; padding:14px; }
.tool-body textarea { line-height:1.7; }
.primary-btn,.secondary-btn { font-size:15px; padding:13px 19px; min-height:46px; }
.output-box { font-size:16px; line-height:1.8; padding:17px; }
.tool-note { font-size:14px; line-height:1.9; color:#68748a; }
.modal-foot { font-size:13px; }
.empty { font-size:16px; }
@media(max-width:850px) {
 .category-nav button { min-height:48px; }
 .group-head small { font-size:12px; }
}
@media(max-width:520px) {
 .hero-copy>p { font-size:16px; }
 .hero-meta { font-size:12px; }
 .quick-stats small { font-size:13px; }
 .popular-card b,.tool-card b { font-size:15px; }
 .popular-card small,.tool-card small { font-size:13px; }
 .tool-card { padding:15px; }
 .modal-head h2 { font-size:24px; }
 .modal-head p { font-size:14px; }
 .tool-note { font-size:14px; }
}

/* Colorful category artwork: consistent, vivid icon tiles in the left tool rail and tool lists. */
.nav-category-icon {
  background: linear-gradient(145deg, #fff1d9, #ffe2b7);
  color: #c56a19;
  font-size: 17px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(210,132,49,.12);
}
.category-nav button:nth-child(2) .nav-category-icon,
.tool-group:nth-child(2) .tool-symbol,
.tool-grid .tool-card:nth-child(n) .tool-symbol { }
.category-nav button:nth-child(2) .nav-category-icon { background:linear-gradient(145deg,#e3f4ff,#cce9ff); }
.category-nav button:nth-child(3) .nav-category-icon { background:linear-gradient(145deg,#f1e8ff,#dfd0ff); }
.category-nav button:nth-child(4) .nav-category-icon { background:linear-gradient(145deg,#e1f8ee,#c5f0dc); }
.category-nav button:nth-child(5) .nav-category-icon { background:linear-gradient(145deg,#ffe9ef,#ffd2df); }
.category-nav button:nth-child(6) .nav-category-icon { background:linear-gradient(145deg,#e5eaff,#d2dcff); }
.category-nav button:nth-child(7) .nav-category-icon { background:linear-gradient(145deg,#fff4d9,#ffe6a8); }
.tool-symbol {
  background: linear-gradient(145deg,#fff1d9,#ffe2b7);
  color: inherit;
  font-size: 21px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(90,100,130,.06);
}
.tool-group:nth-of-type(2) .tool-symbol { background:linear-gradient(145deg,#e3f4ff,#cce9ff); }
.tool-group:nth-of-type(3) .tool-symbol { background:linear-gradient(145deg,#f1e8ff,#dfd0ff); }
.tool-group:nth-of-type(4) .tool-symbol { background:linear-gradient(145deg,#e1f8ee,#c5f0dc); }
.tool-group:nth-of-type(5) .tool-symbol { background:linear-gradient(145deg,#ffe9ef,#ffd2df); }
.tool-group:nth-of-type(6) .tool-symbol { background:linear-gradient(145deg,#e5eaff,#d2dcff); }
.tool-group:nth-of-type(7) .tool-symbol { background:linear-gradient(145deg,#fff4d9,#ffe6a8); }

/* Unique colorful pictograms for every tool card. */
.tool-card .tool-icon,.popular-card .tool-icon {
  background:var(--icon-bg) !important;
  color:#fff !important;
  border:0;
  border-radius:11px;
  font-size:23px;
  font-weight:700;
  line-height:1;
  box-shadow:0 5px 12px color-mix(in srgb, var(--icon-bg) 28%, transparent);
}
.category-nav button { align-items:center; min-height:48px; }
.category-nav button > small {
  flex:0 0 30px; width:30px; min-width:30px;
  margin:0 1px 0 12px; padding:0;
  text-align:center; line-height:22px;
  border-radius:12px; align-self:center;
  font-variant-numeric:tabular-nums;
}
.nav-category-label { align-items:center; }
.nav-category-label > span:last-child {
  display:flex; align-items:center; min-height:30px; line-height:1.25;
}

/* Footer and standalone information pages */
.site-footer{display:block;padding:38px max(5vw,24px) 20px;background:#1c2230;color:#fff}
.footer-main{max-width:1120px;margin:auto;display:flex;justify-content:space-between;gap:48px;padding-bottom:30px}
.footer-about{max-width:330px}.footer-about p{color:#9eabc0;font-size:12px;line-height:1.9;margin:17px 0 0}
.footer-links{display:flex;gap:90px}.footer-links>div{display:flex;flex-direction:column;gap:12px;min-width:110px}
.footer-links b{font-size:13px;margin-bottom:4px}.footer-links a{font-size:12px;color:#aab6c9}.footer-links a:hover{color:#fff}
.footer-bottom{max-width:1120px;margin:auto;border-top:1px solid #394253;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#8290a6;font-size:11px}
.info-page{min-height:100vh;background:var(--bg);color:var(--text)}
.info-header{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px)}
.info-header a.back{font-size:13px;color:var(--accent)}
.info-main{max-width:900px;margin:46px auto 70px;padding:0 24px}
.info-main .eyebrow{margin-bottom:12px}
.info-main h1{font-size:36px;margin:0 0 12px;letter-spacing:-1px}
.info-lead{color:var(--muted);line-height:1.9;margin:0 0 30px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 32px;box-shadow:var(--shadow)}
.info-card h2{font-size:18px;margin:26px 0 9px}.info-card h2:first-child{margin-top:0}
.info-card p,.info-card li{font-size:14px;line-height:1.95;color:#657187}
.info-card ul{padding-left:22px}.info-card a{color:var(--accent);text-decoration:underline}
.info-note{background:#f2f4ff;border-radius:12px;padding:14px 16px;color:#596581;font-size:13px;line-height:1.8;margin-top:20px}
.info-footer{text-align:center;color:#8c96a8;font-size:11px;padding:0 20px 28px}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.help-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.help-item h3{font-size:15px;margin:0 0 8px}.help-item p{font-size:13px;line-height:1.8;color:#69758b;margin:0}
@media(max-width:700px){.footer-main{display:block}.footer-links{gap:35px;margin-top:28px}.footer-bottom{display:block;line-height:2}.info-main{margin:28px auto 45px}.info-main h1{font-size:29px}.info-card{padding:22px 18px}.help-grid{grid-template-columns:1fr}}
.info-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:12px}
.info-footer-links a{color:#657187;font-size:12px;text-decoration:none;transition:color .18s}
.info-footer-links a:hover{color:var(--accent);text-decoration:underline}
.info-card a[href^="mailto:"]{word-break:break-all}