:root{color-scheme:light;--bg:#f5f6fb;--card:#ffffff;--text:#1b1f2b;--muted:#596273;--link:#1f60d3;--brand:#9ad94f;--focus:#f4c542;--header-bg:rgba(255,255,255,.9);--header-border:#d5dae5;--card-border:#d5dae5;--input-bg:#ffffff;--input-border:#c5ccda;--output-bg:#ffffff;--output-border:#c5ccda;--chip-bg:rgba(154,217,79,.16);--chip-hover-bg:rgba(154,217,79,.28);--chip-border:rgba(154,217,79,.45);--chip-shadow:0 4px 12px rgba(17,25,40,.1);--chip-active-bg:linear-gradient(135deg,var(--brand),rgba(31,96,211,.6));--chip-active-color:#0a0a0a;--chip-active-shadow:0 10px 28px rgba(31,96,211,.2)}
:root[data-theme='light']{color-scheme:light}
:root[data-theme='dark']{color-scheme:dark;--bg:#06070b;--card:#131821;--text:#f1f1f1;--muted:#d0d0d0;--link:#9fc8ff;--brand:#9ad94f;--focus:#f4c542;--header-bg:#0f1116;--header-border:#20232b;--card-border:#1b1e26;--input-bg:#0f1116;--input-border:#2a2f39;--output-bg:#0f1116;--output-border:#2a2f39;--chip-bg:rgba(154,217,79,.22);--chip-hover-bg:rgba(154,217,79,.34);--chip-border:rgba(154,217,79,.5);--chip-shadow:0 8px 20px rgba(0,0,0,.45);--chip-active-bg:linear-gradient(135deg,rgba(154,217,79,.95),rgba(31,96,211,.75));--chip-active-color:#04070c;--chip-active-shadow:0 16px 32px rgba(0,0,0,.55)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){color-scheme:dark;--bg:#06070b;--card:#131821;--text:#f1f1f1;--muted:#d0d0d0;--link:#9fc8ff;--brand:#9ad94f;--focus:#f4c542;--header-bg:#0f1116;--header-border:#20232b;--card-border:#1b1e26;--input-bg:#0f1116;--input-border:#2a2f39;--output-bg:#0f1116;--output-border:#2a2f39}
}
@font-face{font-family:'Inter';src:url('fonts/inter-var.woff2.php') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif}
.skip-link{position:absolute;left:12px;top:-48px;background:var(--focus);color:#1b1b1b;padding:8px 14px;border-radius:999px;font-weight:600;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:top .2s ease}
.skip-link:focus-visible{top:12px;outline:none}
.container{max-width:960px;margin:auto;padding:12px}
.site-header{background:var(--header-bg);border-bottom:1px solid var(--header-border);backdrop-filter:blur(12px)}
.site-header .container{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.site-header .brand{display:inline-flex;align-items:center;gap:10px;color:var(--brand);text-decoration:none;font-weight:700}
.site-header .brand__logo{display:block;height:auto;width:auto;max-height:88px;max-width:100%}
.site-header .brand__name{display:inline-block}
.site-header nav.site-links{display:flex;gap:16px}
.site-header nav.site-links a{color:var(--link);text-decoration:none;font-weight:600}
.site-header nav.site-links a.active{text-decoration:underline}
.theme-toggle{display:flex;align-items:center;gap:6px;background:var(--card);color:var(--text);border:1px solid var(--card-border);border-radius:999px;padding:6px 12px;font-size:.85em;font-weight:600;cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;line-height:1;white-space:nowrap}
.theme-toggle:hover{background:var(--bg);border-color:var(--card-border);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.theme-toggle__icon{font-size:1.05em}
.theme-toggle__text{display:inline-block}
.site-header .header-actions{margin-left:auto;display:flex;align-items:center}
.site-header nav.lang{display:flex;gap:12px}
.site-header nav.lang a{color:var(--link);text-decoration:none;display:flex;align-items:center;gap:4px;font-size:.9em}
.site-header nav.lang a .flag{font-size:1.2em}
.site-header nav.lang a.active{opacity:.6}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;grid-auto-rows:1fr}
.card{background:var(--card);padding:12px 12px 10px;border:1px solid var(--card-border);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.card.feature{border:2px solid var(--brand);grid-column:1/-1;background:linear-gradient(135deg,var(--brand),var(--link));color:#0a0a0a}
.card.feature h2 a{color:#0a0a0a}
.card h2,.card p{margin:0}
.card p{font-size:.9em}
.card .button{margin-top:auto}
.promo-widget{margin:36px 0 40px}
.promo-widget .card{border:2px dashed rgba(122,183,255,.6);background:linear-gradient(135deg,rgba(154,217,79,.12),rgba(122,183,255,.1));box-shadow:0 8px 24px rgba(0,0,0,.25)}
.promo-widget .card h2{font-size:1.3em}
.button{display:inline-block;background:var(--brand);color:#0a0a0a;padding:6px 10px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.9em}
@media (prefers-reduced-motion:reduce){
  .skip-link{transition:none}
}
a:focus-visible,.button:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main.container h1{margin:0 0 8px;font-size:1.6em}
main.container>p{margin:0 0 20px;color:var(--muted)}
.app-intro{margin:0 0 28px;padding:18px;border-radius:14px;border:1px solid rgba(154,217,79,.35);background:rgba(154,217,79,.12);display:grid;gap:12px}
.app-intro__title{margin:0;font-size:1.25em;color:var(--text)}
.app-intro__lead{margin:0;color:var(--text);font-size:.95em}
.app-intro__list{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--text)}
.app-intro__list li{margin:0}
.app-intro__list strong{color:var(--link)}
.app-related{margin:32px 0 0;padding:18px;border-radius:14px;border:1px solid rgba(154,217,79,.3);background:rgba(154,217,79,.08);display:grid;gap:12px}
.app-related h2{margin:0;font-size:1.25em}
.app-related__list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.app-related__item{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;border:1px solid rgba(154,217,79,.2);background:var(--card)}
.app-related__link{color:var(--link);font-weight:600;text-decoration:none}
.app-related__link:hover{text-decoration:underline}
.app-related__desc{margin:0;color:var(--muted);font-size:.9em}
.tool-directory{display:grid;gap:20px;margin:28px 0 0}
.tool-finder{margin:0;display:grid;gap:14px;padding:18px;border-radius:14px;border:1px solid rgba(154,217,79,.25);background:rgba(154,217,79,.08)}
.tool-finder__field{display:grid;gap:6px}
.tool-finder__label{font-weight:600;color:var(--muted)}
.tool-finder__filters{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.tool-finder__filters-label{font-weight:600;color:var(--muted);margin-right:4px}
.filter-chip{appearance:none;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:.9em;font-weight:600;letter-spacing:.01em;color:var(--text);background:linear-gradient(135deg,rgba(255,255,255,.82),var(--chip-bg));border:1px solid rgba(255,255,255,.35);box-shadow:var(--chip-shadow),inset 0 1px 0 rgba(255,255,255,.45);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease,border-color .2s ease;backdrop-filter:blur(6px);line-height:1.1;overflow:hidden}
.filter-chip::before{content:"";position:absolute;inset:-35% 12% 25% -12%;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.05));opacity:.85;transition:opacity .2s ease,transform .2s ease;z-index:-1}
.filter-chip:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(255,255,255,.9),var(--chip-hover-bg));box-shadow:0 14px 28px rgba(17,25,40,.18),inset 0 1px 0 rgba(255,255,255,.5)}
.filter-chip:hover::before{opacity:1;transform:translateY(-2px)}
.filter-chip:focus-visible{outline:none;transform:translateY(-2px);box-shadow:0 0 0 3px rgba(154,217,79,.45),0 16px 30px rgba(17,25,40,.22)}
.filter-chip.is-active,.filter-chip[aria-pressed='true']{background:var(--chip-active-bg);border-color:transparent;color:var(--chip-active-color);box-shadow:var(--chip-active-shadow),inset 0 1px 0 rgba(255,255,255,.4);transform:translateY(-2px)}
.filter-chip.is-active::before,.filter-chip[aria-pressed='true']::before{opacity:0}
.tool-category[hidden]{display:none}
.category-title{margin:24px 0 8px;font-size:1.4em}
.site-footer{opacity:.9;border-top:1px solid var(--header-border);margin-top:32px}
.ad{margin:24px 0}
.affiliate-box{margin:24px 0;padding:16px;border-radius:12px;border:1px solid rgba(154,217,79,.25);background:rgba(154,217,79,.08);display:flex;flex-direction:column;gap:8px}
.affiliate-box .affiliate-label{margin:0;color:var(--muted);font-size:.75em;letter-spacing:.08em;text-transform:uppercase}
.affiliate-box .affiliate-title{margin:0;font-size:1.05em;font-weight:600}
.affiliate-box .affiliate-title a{color:var(--link);text-decoration:none}
.affiliate-box .affiliate-title a:hover{text-decoration:underline}
.affiliate-box .affiliate-disclosure{margin:0;color:var(--muted);font-size:.9em}
textarea,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']),
select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);margin-bottom:12px}
input[type='checkbox'],
input[type='radio']{width:auto;margin:0}
input::placeholder,
textarea::placeholder{color:var(--muted);opacity:1}
label.checkbox{display:flex;align-items:center;gap:10px;color:var(--text);margin:12px 0 16px;font-weight:600}
label.checkbox input{flex:0 0 auto}
label.checkbox span{color:var(--text)}
.form-hint{display:block;color:var(--muted);font-size:.85em;margin-top:4px}
.form-hint+.form-hint{margin-top:2px}
small{color:var(--muted)}
label{display:block;margin:8px 0 4px;color:var(--muted)}
.micro-help{display:inline-flex;align-items:center;position:relative;margin-left:6px}
.micro-help__toggle{background:var(--card);color:var(--muted);border:1px solid var(--input-border);border-radius:999px;width:24px;height:24px;padding:0;font-size:.78em;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.micro-help__toggle:hover{background:var(--bg);color:var(--text)}
.micro-help__bubble{position:absolute;right:0;bottom:calc(100% + 10px);background:var(--card);color:var(--text);border:1px solid var(--card-border);border-radius:12px;padding:14px 16px 14px 14px;box-shadow:0 12px 30px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease;z-index:40;width:min(280px,80vw);font-size:.85em;pointer-events:none}
.micro-help__bubble::before{content:"";position:absolute;bottom:-9px;right:16px;border-width:9px 9px 0 9px;border-style:solid;border-color:var(--card-border) transparent transparent transparent}
.micro-help__bubble::after{content:"";position:absolute;bottom:-8px;right:16px;border-width:8px 8px 0 8px;border-style:solid;border-color:var(--card) transparent transparent transparent}
.micro-help[data-micro-help-open='true'] .micro-help__bubble{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.micro-help__close{position:absolute;top:6px;right:6px;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:2px;font-size:1em;line-height:1}
.micro-help__close:hover{color:var(--text)}
.micro-help__list{list-style:none;margin:8px 0 10px;padding:0;display:grid;gap:6px}
.micro-help__note{margin:0;color:var(--muted);font-size:.85em}
.output{background:var(--output-bg);border:1px dashed var(--output-border);padding:12px;border-radius:10px;white-space:pre-wrap}
form .button{margin-top:12px}
.slug-output{gap:12px}
.slug-preview{display:flex;gap:8px;align-items:center}
.slug-preview input{margin:0;flex:1}
.slug-preview .button{margin:0;flex-shrink:0}
.notes{color:var(--muted);font-size:0.9em;margin-top:8px}
ins{background:rgba(154,217,79,.3);text-decoration:none;color:#9ad94f}
del{background:rgba(255,99,99,.3);color:#ff6363;text-decoration:line-through}
/* diff-checker styles */
.diff-inputs{display:flex;gap:16px;margin-bottom:12px}
.diff-inputs .editor{flex:1;display:flex;flex-direction:column}
.diff-inputs textarea{border-radius:10px;margin:0;height:300px;resize:vertical;font-family:monospace;background-attachment:local;overflow:auto}
.diff-list{list-style:none;padding-left:0}
.diff-list li{cursor:pointer;margin-bottom:4px}
.diff-list li:hover{text-decoration:underline}
.output.error{border-color:#722;background:#331;color:#fdd}
.inline-fields{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.inline-fields label{display:inline-block;margin:0}
.inline-fields input{width:80px;margin:0}
.blog-actions{display:flex;gap:12px;align-items:center;margin:8px 0 16px;flex-wrap:wrap}
.blog-actions a{color:var(--link);text-decoration:none;font-size:.9em}
.blog-menu{display:flex;gap:12px;align-items:center;margin:12px 0 20px;flex-wrap:wrap}
.blog-menu a{color:var(--link);text-decoration:none;font-weight:600}
.blog-menu a.active{text-decoration:underline}
.blog-filter{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);margin:0 0 16px}
.blog-grid{display:grid;gap:16px;margin-bottom:24px}
.blog-card{background:var(--card);border:1px solid var(--card-border);padding:16px;border-radius:12px;display:flex;flex-direction:column;gap:12px}
.blog-card h2{margin:0;font-size:1.3em}
.blog-card h2 a{color:var(--text);text-decoration:none}
.blog-card h2 a:hover{text-decoration:underline}
.blog-card .blog-meta{color:var(--muted);font-size:.85em;margin:0}
.blog-card .blog-excerpt{margin:0;color:var(--text);font-size:.95em}
.blog-card .button{align-self:flex-start}
.blog-meta{color:var(--muted);font-size:.9em;margin:0 0 12px}
.blog-tags{margin:8px 0 0;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.blog-tags a{color:var(--link);text-decoration:none}
.blog-tags a:hover{text-decoration:underline}
.blog-content{display:grid;gap:16px}
.blog-content p{margin:0}
.blog-content h2,.blog-content h3{margin:24px 0 8px}
.blog-content ul{padding-left:20px;margin:0;display:grid;gap:8px}
.blog-related{margin-top:32px;padding:16px;border-radius:12px;background:rgba(154,217,79,.07);border:1px solid rgba(154,217,79,.2)}
.blog-related h2{margin:0 0 12px}
.blog-related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.blog-related li{display:flex;flex-direction:column;gap:4px}
.blog-related li span{color:var(--muted);font-size:.85em}
.blog-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.blog-pagination .button{flex:1;min-width:200px;text-align:center}
.blog-back{margin:24px 0}
.blog-back a{color:var(--link);text-decoration:none}
.blog-back a:hover{text-decoration:underline}
.button.secondary{background:transparent;color:var(--link);border:1px solid var(--input-border)}
.button.secondary:hover{background:var(--bg)}
.dual-textareas{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0}
.dual-textareas__col{flex:1 1 280px;display:flex;flex-direction:column;gap:8px}
.dual-textareas textarea{border-radius:10px;margin:0;height:260px;resize:vertical;font-family:monospace;background-attachment:local;overflow:auto}
.dual-textareas__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.mode-fieldset{margin:12px 0;padding:12px;border:1px solid var(--card-border);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.mode-fieldset legend{font-weight:600}
.mode-option{display:flex;align-items:center;gap:8px;color:var(--muted)}
.mode-option input{width:auto;margin:0}
.entity-stats{margin-top:24px}
.entity-stats ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.entity-stats li{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--card)}
.token-map-card{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.token-map-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.token-map-card__header p{margin:4px 0 0;font-size:.9em;color:var(--muted)}
.token-map-card__table{overflow:auto}
.token-map{width:100%;border-collapse:collapse}
.token-map th,.token-map td{border:1px solid var(--card-border);padding:8px;text-align:left;font-size:.9em}
.token-map th{background:rgba(154,217,79,.2)}
.file-input{font-size:.9em;color:var(--muted)}
.notice{border-left:4px solid transparent}
.notice-success{border-color:#15803d}
.notice-error{border-color:#b91c1c}
.notice-warning{border-color:#f59e0b;background:rgba(245,158,11,.08);padding:10px 12px;border-radius:10px;margin:12px 0;color:var(--muted);font-size:.9em}
.notice ul{margin:0;padding-left:18px}
.blog-post header{margin-bottom:16px}
.blog-post h1{margin:0 0 8px}
.blog-rss::before{content:'🔔';margin-right:4px}
.blog-category{color:var(--link);text-decoration:none}
.blog-category:hover{text-decoration:underline}
.privacy-preferences-link{background:none;border:none;padding:0;color:var(--link);cursor:pointer;font:inherit;text-decoration:underline}
.privacy-preferences-link:hover,.privacy-preferences-link:focus{text-decoration:none;outline:none;color:var(--link)}
.privacy-quick{display:inline-flex;align-items:center;gap:6px;margin-left:12px;position:relative}
.privacy-quick__toggle{background:none;border:1px solid transparent;color:var(--link);cursor:pointer;font-size:.75em;padding:4px 8px;border-radius:999px;text-decoration:underline;text-decoration-thickness:1px}
.privacy-quick__toggle:hover,.privacy-quick__toggle:focus{background:rgba(10,124,255,.08);outline:none}
.privacy-quick__panel{position:absolute;top:calc(100% + 6px);right:0;min-width:260px;max-width:min(360px,calc(100vw - 32px));background:var(--card);border:1px solid var(--card-border);border-radius:14px;box-shadow:0 18px 48px rgba(12,18,28,.22);padding:16px;z-index:30}
.privacy-quick__title{margin:0 0 8px;font-size:.95em}
.privacy-quick__list{margin:0 0 8px;padding:0 0 0 18px;font-size:.9em;color:var(--muted)}
.privacy-quick__list li{margin-bottom:6px}
.privacy-quick__list li:last-child{margin-bottom:0}
.privacy-quick__disclaimer{margin:0;font-size:.8em;color:var(--muted)}
.privacy-quick__close{margin-top:12px;background:none;border:none;color:var(--link);cursor:pointer;font-size:.85em;padding:0;text-decoration:underline}
.privacy-quick__close:hover,.privacy-quick__close:focus{text-decoration:none;outline:none}
.privacy-preferences-overlay{position:fixed;inset:0;background:rgba(10,12,17,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:120}
.privacy-preferences-overlay[hidden]{display:none}
.privacy-preferences-dialog{background:var(--card);border:1px solid var(--card-border);border-radius:18px;box-shadow:0 22px 60px rgba(10,12,17,.28);max-width:480px;width:100%;padding:24px;display:flex;flex-direction:column;gap:16px}
.privacy-preferences-dialog:focus{outline:2px solid var(--link);outline-offset:4px}
.privacy-preferences-description{margin:0;color:var(--muted)}
.privacy-preferences-section{display:flex;flex-direction:column;gap:12px}
.privacy-preferences-section h3{margin:0;font-size:1em}
.privacy-preferences-section p{margin:0;color:var(--muted);font-size:.9em}
.privacy-preferences-actions{display:flex;flex-wrap:wrap;gap:8px}
.privacy-preferences-status{margin:4px 0 0;font-size:.85em;color:var(--muted)}
.privacy-preferences-close{align-self:flex-end;background:none;border:none;color:var(--link);cursor:pointer;font-size:.9em;padding:0;text-decoration:underline}
.privacy-preferences-close:hover,.privacy-preferences-close:focus{text-decoration:none;outline:none}
@media (max-width:600px){
  .blog-card{padding:14px}
  .blog-card h2{font-size:1.15em}
  .blog-pagination .button{min-width:140px}
  .privacy-quick__panel{position:fixed;top:auto;right:16px;left:16px;bottom:16px;max-width:none}
  .privacy-preferences-dialog{max-width:100%;padding:20px}
}