@import url('asernus-fonts.css');
@import url('asernus-tokens.css?v=asernus-family-20261021');

/* Asernus Tools · the homepage family: graphite or light surfaces, blue controls, one directory. */
:root,:root[data-theme="dark"]{color-scheme:dark;--bg:#181a1d;--surface:#232529;--surface2:#292c31;--glass:#232529;--input-bg:#202226;--text:#eceef2;--muted:#b1b7c1;--faint:#b1b7c1;--icon:#b1b7c1;--border:#383c43;--border-strong:#4a505b;--divider:#383c43;--primary:#9bb8ff;--primary-solid:#3e65c8;--primary-solid-hover:#4670d5;--on-primary-solid:#fff;--primary2:#9bb8ff;--on-primary:#14213c;--grad:linear-gradient(#9bb8ff,#9bb8ff);--track:#383c43;--err:#f1a0a4;--status:#b1b7c1;--link:#9bb8ff;--hover:#9bb8ff12;--hover-bg:#292c31;--ok:#76caa2;--warn:#e3c68d;--newc:#b1b7c1;--miss:#f1a0a4;--card-hover:#292c31}
:root[data-theme="light"]{color-scheme:light;--bg:#f0f2f5;--surface:#fff;--surface2:#f5f6f8;--glass:#fff;--input-bg:#fff;--text:#24272d;--muted:#606875;--faint:#606875;--icon:#606875;--border:#dde1e7;--border-strong:#ccd2dc;--divider:#dde1e7;--primary:#2858d5;--primary-solid:#2858d5;--primary-solid-hover:#1b46b4;--on-primary-solid:#fff;--primary2:#2858d5;--on-primary:#fff;--grad:linear-gradient(#2858d5,#2858d5);--track:#dde1e7;--err:#b13242;--status:#606875;--link:#2858d5;--hover:#2858d50d;--hover-bg:#f5f6f8;--ok:#21764f;--warn:#866410;--newc:#606875;--miss:#b13242;--card-hover:#f5f6f8}
:root{--tools-width:1248px;--tools-mono:ui-monospace,"SFMono-Regular",Consolas,monospace;--tools-row-bleed:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--bg)}body{padding:0;margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:15px/1.6 'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::selection{background:var(--primary);color:var(--on-primary)}button,input,select,textarea{font-family:inherit}a{color:inherit}svg{flex:none}button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary)!important;outline-offset:4px!important;box-shadow:none!important}.hidden,[hidden]{display:none!important}.bgfx{display:none!important}
main{width:min(920px,calc(100% - 64px));max-width:none;margin:0 auto;padding:64px 0 72px;min-width:0}main.tool-wide{width:min(var(--tools-width),calc(100% - 64px))}
h1,h2,h3{font-family:'DM Sans',system-ui,sans-serif;line-height:1.12;letter-spacing:-.035em;font-weight:650}
main>h1{font-size:clamp(36px,4.2vw,54px);line-height:1.02;letter-spacing:-.045em;color:var(--text);background:none;-webkit-text-fill-color:var(--text);margin:0 0 16px}
p.sub{font-size:17px;line-height:1.5;color:var(--muted);max-width:56ch;margin:0 0 36px;text-wrap:pretty}
.card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:28px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-width:0}.card>form>label:first-child{margin-top:0}.card>form>.cols{margin-top:0}

/* Header, tool tabs and language menu: the same bar as www.asernus.eu */
.as-skip{position:fixed;left:20px;top:12px;z-index:2000;transform:translateY(-180%);background:var(--primary);color:var(--on-primary);padding:12px 20px;border-radius:8px}.as-skip:focus{transform:none}
.as-header{position:relative;z-index:50;width:100%;padding:0 max(32px,calc((100% - var(--tools-width))/2));background:var(--bg);border-bottom:1px solid var(--border)}
.as-header-inner{min-height:72px;display:flex;align-items:center;gap:8px}
.as-brand{display:inline-flex;align-items:center;text-decoration:none;min-height:44px;flex:none}
.as-brand img{display:block;width:112px;height:auto}
.as-brand .brand-light{display:none}:root[data-theme="light"] .as-brand .brand-dark{display:none}:root[data-theme="light"] .as-brand .brand-light{display:block}
.as-area{display:flex;align-items:center;gap:12px;min-height:44px;margin-left:4px;font-size:16px;font-weight:500;line-height:24px;white-space:nowrap;color:var(--muted);text-decoration:none;transition:color 160ms}
.as-area::before{content:"/";color:var(--border-strong);font-weight:400}
.as-area:hover{color:var(--text)}
.as-header-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.as-header-links a{display:inline-flex;align-items:center;min-height:40px;padding-inline:12px;border-radius:7px;color:var(--muted);font-size:14px;text-decoration:none;transition:color 160ms,background 160ms}
.as-header-links a:hover{color:var(--text);background:var(--surface)}
.as-header-links .as-design-link{display:none}
#toolsChrome{display:flex;gap:4px;align-items:center;font:13px/1.4 'DM Sans',sans-serif;margin-left:4px}
#toolsChrome .tools-icobtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0;margin:0;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;text-decoration:none;box-shadow:none;transition:color 160ms,background 160ms}
#toolsChrome .tools-icobtn:hover{background:var(--surface);color:var(--text)}
#toolsChrome .tools-icobtn svg{width:18px;height:18px;display:block}
#toolsLang{position:relative;display:inline-flex}
#toolsChrome .tools-lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:68px;height:44px;padding:0 10px;margin:0;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;box-shadow:none;white-space:nowrap;font:13px/1.4 'DM Sans',sans-serif;transition:color 160ms,background 160ms}
#toolsChrome .tools-language-globe{display:inline-flex;align-items:center;flex:none}
#toolsChrome .tools-language-globe svg{display:block;width:17px;height:17px}
#toolsChrome .tools-language-code{font-size:12px;font-weight:500;letter-spacing:.02em}
#toolsChrome .tools-lang-btn:hover,#toolsChrome .tools-lang-btn[aria-expanded="true"]{background:var(--surface);color:var(--text)}
#toolsChrome .chev svg{width:12px;height:12px;display:block;color:var(--muted)}
.tools-lang-menu{position:absolute;top:calc(100% + 8px);right:0;display:flex;flex-direction:column;min-width:205px;max-width:calc(100vw - 32px);padding:6px;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px #0004;z-index:1000}
:root[data-theme="light"] .tools-lang-menu{box-shadow:0 12px 32px #24272d1f}
.tools-lang-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;margin:0;text-align:left;font:14px/1.3 'DM Sans',sans-serif;color:var(--muted);background:none;border:0;border-radius:6px;cursor:pointer}
.tools-lang-item:hover{background:var(--surface2);color:var(--text)}
.tools-lang-item.current{background:var(--surface2);color:var(--primary);font-weight:600}
.flag{display:inline-flex;flex:none;line-height:0;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px var(--border-strong)}
.flag svg{display:block;height:14px;width:21px}
.as-subnav{position:relative;display:flex;align-items:center;gap:4px;margin-bottom:-1px;overflow-x:auto;scrollbar-width:none}
.as-subnav::-webkit-scrollbar{display:none}
.as-subnav a{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;white-space:nowrap;text-decoration:none;color:var(--muted);font-size:14px;border-bottom:2px solid transparent;transition:color 160ms,border-color 160ms}
.as-subnav a:first-child{margin-left:-12px}
.as-subnav a:hover{color:var(--text)}
.as-subnav a[aria-current="page"]{color:var(--text);border-color:var(--primary)}
.as-subnav .as-nav-icon{width:16px;height:16px;color:var(--icon);transition:color 160ms}
.as-subnav a:hover .as-nav-icon,.as-subnav a[aria-current="page"] .as-nav-icon{color:var(--primary)}
.as-nav-no{display:none}

/* Shared decorative indicator; aria-current and ordinary links remain the navigation. */
.as-subnav--motion a{transition:color 160ms}
.as-subnav--motion a[aria-current="page"]{border-bottom-color:transparent}
.as-tab-indicator{position:absolute;left:0;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--primary);pointer-events:none;visibility:hidden}
.as-subnav--motion .as-tab-indicator{visibility:visible}
@media(forced-colors:active){.as-tab-indicator{background:Highlight}}

/* Tool components (forms, upload, results). Geometry only; behaviour lives in each tool. */
.dropzone{position:relative;border:1px dashed var(--border-strong);background:var(--input-bg);border-radius:12px;padding:64px 24px 52px;color:var(--muted);line-height:1.5;transition:background 160ms,border-color 160ms;transform:none}.dropzone::before{display:none!important}.dropzone::after{content:'↑';display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--primary);font:400 22px/1 'DM Sans',system-ui,sans-serif;position:absolute;top:26px;left:calc(50% - 24px);transition:border-color 160ms}.dropzone .big{padding-top:44px;font:600 17px/1.5 'DM Sans',system-ui,sans-serif;color:var(--text)}.dropzone .small,.dropzone>div+div{font-size:14px;margin-top:6px;color:var(--muted)}.dropzone:hover,.dropzone.hover{border-color:var(--primary);color:var(--text);background:var(--hover);box-shadow:none;transform:none}.dropzone:hover::after,.dropzone.hover::after{border-color:var(--primary)}label{font-size:13px;font-weight:500;color:var(--muted);margin:24px 0 8px}select,textarea,input[type=text],input[type=url],input[type=number],input[type=file]{font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--border-strong);border-radius:8px;max-width:100%;min-height:44px;padding:10px 12px}select{padding-right:30px}textarea{line-height:1.6;resize:vertical}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}select:focus,textarea:focus,input:focus{box-shadow:none;border-color:var(--primary)}input[type=color]{min-height:48px;height:48px;border-radius:8px}input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--primary)}input[type=range]{min-height:44px}.urlrow{gap:12px}.urlfield{background:var(--input-bg);border:1px solid var(--border-strong);border-radius:10px;padding:0 14px;min-height:52px}.urlfield input{border:0;background:transparent;padding:13px 0;min-height:50px}.urlfield:focus-within{box-shadow:none;border-color:var(--primary)}.urlfield input:focus-visible{outline-offset:0!important}.radios{gap:24px;flex-wrap:wrap}.radios label{min-height:44px;margin:0}.radios input{width:18px;height:18px}.opts,.cols{gap:16px}.btn,button.primary,.btn-primary{border-radius:8px;min-height:44px;padding:10px 18px;font-weight:600;font-size:14px;box-shadow:none;transition:background 160ms,border-color 160ms,color 160ms;transform:none}.btn,.btn.ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border-strong)}.btn.primary,button.primary,.btn-primary{background:var(--primary-solid);color:var(--on-primary-solid);border:1px solid transparent;box-shadow:none}.btn:hover:not(:disabled){transform:none;box-shadow:none;border-color:var(--primary)}.btn.primary:hover:not(:disabled),button.primary:hover:not(:disabled),.btn-primary:hover:not(:disabled){transform:none;box-shadow:none;filter:none;background:var(--primary-solid-hover);border-color:transparent}.btn.ghost:hover{background:var(--hover);border-color:var(--primary)}.btn.sm,.mini{min-height:44px;border-radius:8px;font-size:13px}.seg{border-color:var(--border);border-radius:10px;background:var(--input-bg);padding:4px;margin-top:24px}.seg button{min-height:44px;border-radius:7px;font-size:14px}.seg button.active{background:var(--surface2);color:var(--text);box-shadow:none}.preset{min-height:76px;border-color:var(--border);border-radius:10px;background:var(--input-bg);padding:14px 16px}.preset.active{background:var(--hover);border-color:var(--primary);box-shadow:inset 3px 0 var(--primary)}.preset:hover{transform:none;border-color:var(--primary)}.preset span{font-size:12px;color:var(--muted)}.presets{gap:12px}.units{border-radius:8px}.unit{min-height:44px;font-size:13px}.unit.active{background:var(--surface2);color:var(--primary)}.hint,.foot{font-size:13px;line-height:1.6;color:var(--muted)}.hint{margin-top:12px}.meta{border-color:var(--border);margin-top:24px;padding-top:24px}.meta .title{font-family:'DM Sans',system-ui,sans-serif;font-size:17px;font-weight:650}.meta .details{font-size:13px}.bar{height:5px;background:var(--track);border-radius:3px;margin-top:14px}.bar>div{background:var(--primary);border-radius:3px}.bar>div::after{display:none}.sec-h{gap:12px;margin:32px 0 14px}.sec-h h2{font:600 15px/1.4 'DM Sans',system-ui,sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--text)}.sec-h .no{display:none}.result-stats{gap:12px}.result-stats>div{background:var(--input-bg);border-radius:10px;border-color:var(--border);padding:20px 12px}.result-stats .v,.sc-pct{font-family:'DM Sans',system-ui,sans-serif;font-weight:650;color:var(--primary);background:none;-webkit-text-fill-color:var(--primary)}.result-stats .k{font:11px/1.5 'DM Sans',system-ui,sans-serif;letter-spacing:.02em;text-transform:none}.done a,#done a,.result a{color:var(--link);display:inline-flex;min-height:44px;align-items:center;text-underline-offset:4px}.linkrow input{min-width:0}.linkrow button{min-height:48px;border-radius:8px}.path .chip{border-radius:8px;backdrop-filter:none;transform:none}.f-video{color:var(--primary);border-color:var(--border-strong);background:var(--hover)}.f-audio{color:var(--primary);border-color:var(--border-strong);background:var(--hover)}.f-image{color:var(--warn);border-color:var(--border-strong);background:var(--surface2)}.f-doc{color:var(--muted);border-color:var(--border-strong);background:var(--hover)}.f-pdf{color:var(--err);border-color:var(--border-strong);background:var(--surface2)}:root[data-theme="light"] .f-video{color:var(--primary)}:root[data-theme="light"] .f-image{color:var(--warn)}.adv{border-radius:10px!important;background:var(--input-bg)!important}.adv summary{min-height:44px;align-content:center}.result img{background:#fff!important;border-radius:8px;box-shadow:none;animation:none}.thumb{border-radius:8px;background:var(--input-bg)}
.pv-compare,.pv-inline img,.pv-inline video,.pv-inline iframe,.pv-half video{border-radius:8px!important}.pv-cline{background:var(--primary)!important}.pv-chandle{width:44px!important;height:44px!important;border-radius:8px!important;background:var(--primary)!important;color:var(--on-primary)!important;box-shadow:none!important}.pv-lbl{font-family:ui-monospace,monospace!important;font-weight:400!important}.pv-inline audio{max-width:100%}

/* How-to under each tool: three quiet steps, numbered by CSS instead of "01". */
.tool-notes{counter-reset:tool-note;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid var(--border);margin-top:56px;padding-top:28px}
.tool-notes>div{position:relative;min-width:0;padding-left:40px}
.tool-notes>div::before{counter-increment:tool-note;content:counter(tool-note);position:absolute;top:0;left:0;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--border-strong);border-radius:50%;font:600 12px/1 'DM Sans',system-ui,sans-serif;color:var(--muted);font-variant-numeric:tabular-nums}
.tool-note-no{display:none}
.tool-notes h2{font-size:15px;line-height:1.4;letter-spacing:-.015em;margin:2px 0 4px}
.tool-notes p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}

/* Footer: same rhythm as the homepage footer */
.as-footer{width:min(var(--tools-width),calc(100% - 64px));min-height:96px;margin:0 auto;padding:24px 0;border-top:1px solid var(--border);display:flex;align-items:center;gap:24px;font-size:13px;line-height:1.5;color:var(--muted)}
.as-footer p{margin:0}
.as-footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:color 160ms}
.as-footer a:hover{color:var(--text)}
.as-footer a:first-of-type{margin-left:auto}
.as-footer small{display:none}

/* The string-catalog editor keeps its own scrolling table, never the page. */
.tool-wide .dropzone{padding-block:100px 84px}.tool-wide .dropzone::after{top:62px}.toolbar,.filterbar,.actionsrow{gap:10px;margin-bottom:20px}.fileinfo{font-size:13px;overflow-wrap:anywhere}.statcard{border-radius:10px;padding:20px;background:var(--surface);border-color:var(--border);min-width:0}.statcard.active{border-color:var(--primary);box-shadow:inset 3px 0 var(--primary)}.statsrow{gap:12px;margin-bottom:24px}.sc-pct{font-size:30px;margin:10px 0}.sc-bar{height:4px;background:var(--track)}.sc-bar>div{background:var(--primary)}.sc-sub{font-size:12px}.sc-x{min-width:44px;min-height:44px;display:grid;place-items:center;font-size:17px}.chips{flex-wrap:wrap}.filterbar .chip{min-height:44px;border-radius:8px;padding:10px 16px}.filterbar .chip.active{background:var(--surface2);color:var(--primary);border-color:var(--primary)}.pill{color:var(--text);min-height:44px;border-radius:8px}.filterbar input[type=text]{min-width:0;flex:1 1 240px}.filterbar select{min-width:0;max-width:100%;flex:0 1 auto;min-height:48px}.tablewrap{max-width:100%;border-radius:10px;overscroll-behavior:contain}.tablewrap td{padding:14px 12px}.tablewrap th{font:10px ui-monospace,monospace;padding-block:18px;letter-spacing:.06em}.modal{background:#0009;backdrop-filter:blur(4px);padding:20px;z-index:100}.modalbox{border-radius:14px;padding:24px;background:var(--surface);max-height:86dvh;border-color:var(--border-strong);box-shadow:none;min-width:0}.modalhead{font-family:'DM Sans',system-ui,sans-serif;font-size:20px;font-weight:650;letter-spacing:-.025em}.modalbox textarea,.modalbox input[type=text]{border-radius:8px}.mrow{flex-wrap:wrap;gap:10px}.mrow button{flex:1;min-width:100px}.varrow{gap:12px}.vartag{min-width:48px;font-size:11px}.varrow textarea{min-width:0}.prev{border-radius:8px;font-size:12px}.modalbox .prev{max-width:100%}.tool-wide #toast{border-radius:8px}.actionsrow{margin-top:24px}.pluraltag{color:var(--primary)}

/* Directory / landing page: big title, then one aligned row per tool */
main.tools-directory{width:min(var(--tools-width),calc(100% - 64px));padding:88px 0 88px}
.directory-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:32px 72px;align-items:end;padding:0 0 72px}
.directory-hero h1{font-size:clamp(44px,5.4vw,80px);line-height:.98;letter-spacing:-.045em;margin:0;background:none;color:var(--text);-webkit-text-fill-color:var(--text);font-weight:650}
.directory-hero h1 em{display:block;font-style:normal;color:inherit}
.directory-hero h1 br{display:none}
.directory-intro{padding-bottom:6px}
.directory-intro>p{font-size:18px;line-height:1.5;max-width:40ch;color:var(--muted);margin:0;text-wrap:pretty}
.directory-intro .as-text-link{display:none}
.directory-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:0 0 18px;border-bottom:1px solid var(--border)}
.directory-section-head h2{font-size:28px;line-height:1.2;letter-spacing:-.03em;margin:0}
.directory-section-head>p{display:none}
.tools-grid{display:flex;flex-direction:column}
.tool-card{position:relative;isolation:isolate;display:grid;grid-template-columns:40px minmax(150px,220px) minmax(0,1fr) minmax(0,240px) 16px;grid-template-areas:"icon name text tag arrow";align-items:center;column-gap:24px;min-height:80px;padding:16px 0;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;background:none}
.tool-card::before{content:"";position:absolute;inset:-1px calc(var(--tools-row-bleed)*-1);z-index:-1;border-radius:12px;background:var(--surface);opacity:0;transition:opacity 160ms}
.tool-card:hover::before{opacity:1}
.tool-card:focus-visible{outline-offset:2px!important;border-radius:4px}
.tool-card-top,.tool-card-bottom{display:contents}
.tool-card-icon{grid-area:icon;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;color:var(--icon);transition:color 160ms,border-color 160ms}
.tool-card-icon svg{display:block;width:20px;height:20px}
.tool-card-number{display:none}
.tool-card h3{grid-area:name;margin:0;font-size:18px;line-height:1.3;letter-spacing:-.015em;font-weight:650}
.tool-card>p{grid-area:text;margin:0;max-width:none;font-size:14px;line-height:1.5;color:var(--muted)}
.tool-card-tag{grid-area:tag;font:12px/1.6 var(--tools-mono);letter-spacing:.02em;color:var(--muted);overflow-wrap:anywhere;transition:color 160ms}
.tool-card-arrow{grid-area:arrow;display:block;width:16px;height:16px;font-size:16px;line-height:1;color:var(--muted);transition:color 160ms,transform 160ms}
.tool-card:hover .tool-card-icon{color:var(--primary);border-color:var(--border-strong)}
.tool-card:hover .tool-card-tag{color:var(--text)}
.tool-card:hover .tool-card-arrow{color:var(--primary);transform:translate(2px,-2px)}
.directory-bottom{display:grid;grid-template-columns:1fr 1fr;gap:32px 72px;align-items:start;margin-top:72px;padding:28px 32px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.directory-bottom h2{font-size:20px;letter-spacing:-.02em;margin:0 0 8px}
.directory-bottom p{font-size:14px;line-height:1.55;color:var(--muted);max-width:52ch;margin:0}

@media(max-width:1050px){
.as-header{padding-inline:24px}
main,main.tool-wide,main.tools-directory,.as-footer{width:calc(100% - 48px)}
main.tools-directory{padding-top:64px}
.directory-hero{grid-template-columns:1fr;gap:20px;padding-bottom:56px}
.directory-hero h1 em{display:inline}
.tool-card{grid-template-columns:40px minmax(0,1fr) minmax(0,200px) 16px;grid-template-areas:"icon name tag arrow" "icon text tag arrow";row-gap:2px}
}
@media(max-width:680px){
:root{--tools-row-bleed:10px}
.as-header{padding-inline:16px}
.as-header-inner{gap:4px}
.as-brand img{width:100px;height:auto}
.as-area{font-size:15px;gap:10px;margin-left:2px}
.as-header-links{display:none}
#toolsChrome{margin:0 0 0 auto;gap:0}
#toolsChrome .tools-icobtn{min-width:40px}
#toolsChrome .tools-lang-btn{min-width:60px;padding-inline:6px;gap:6px;font-size:12px}
.as-subnav{margin-inline:-16px;padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.as-subnav a{min-height:46px;font-size:13px;padding-inline:10px}
.as-subnav a:first-child{margin-left:-10px}
main,main.tool-wide,main.tools-directory,.as-footer{width:calc(100% - 32px)}
main{padding:40px 0 48px}
main>h1{font-size:clamp(32px,9vw,40px);margin:0 0 12px}
p.sub{font-size:16px;margin-bottom:28px}
.card{padding:16px;border-radius:14px}
.dropzone{padding:52px 16px 32px}.dropzone::after{top:20px;width:44px;height:44px;left:calc(50% - 22px)}.dropzone .big{font-size:17px;padding-top:36px}.dropzone .small{font-size:13px}
.urlrow{flex-direction:column}.urlrow>.btn{width:100%}.urlfield{padding-inline:12px}.urlfield input{font-size:16px}.opts,.cols{grid-template-columns:1fr;gap:4px}.presets{grid-template-columns:1fr 1fr;gap:8px}.preset{padding:12px 10px}.preset strong{font-size:13px}.preset span{font-size:11px}.custom-row{gap:8px}.custom-row label{flex-basis:100%}.result-stats{gap:8px}.result-stats>div{padding:16px 8px}.result-stats .v{font-size:22px}.result-stats .k{font-size:10px}
.tool-notes{grid-template-columns:1fr;gap:20px;margin-top:40px;padding-top:24px}
.tool-notes h2{font-size:15px}
.as-footer{display:flex;flex-wrap:wrap;gap:4px 24px;padding:24px 0}
.as-footer p{flex-basis:100%;margin-bottom:4px}
.as-footer a:first-of-type{margin-left:0}
.tool-wide .dropzone{padding-block:76px 48px}.tool-wide .dropzone::after{top:44px}.statcard{min-width:130px;padding:16px}.filterbar{gap:10px}.filterbar .chips{width:100%;gap:6px}.filterbar .chip{flex:1;padding-inline:9px;font-size:12px}.filterbar select{width:100%}.filterbar .langpills{width:100%;gap:6px}.toolbar .btn,.actionsrow .btn{flex:1 1 120px;padding-inline:12px;font-size:12px}.toolbar .fileinfo{flex-basis:100%;min-width:0}.tablewrap{border-radius:8px}.modal{padding:12px}.modalbox{padding:16px}.modalhead{font-size:18px}.varrow{flex-wrap:wrap}.vartag{width:100%}.varrow textarea{flex-basis:100%}.linkrow{flex-direction:column}.linkrow button{min-height:44px}
main.tools-directory{padding:44px 0 56px}
.directory-hero{gap:16px;padding-bottom:40px}
.directory-hero h1{font-size:clamp(36px,11vw,48px);line-height:1.02}
.directory-hero h1 em{display:block}
.directory-intro>p{font-size:16px}
.directory-section-head{padding-bottom:14px}
.directory-section-head h2{font-size:24px}
.tool-card{grid-template-columns:40px minmax(0,1fr) 16px;grid-template-areas:"icon name arrow" "icon text arrow" "icon tag arrow";align-items:start;column-gap:16px;row-gap:2px;padding-block:18px}
.tool-card-icon{margin-top:2px}
.tool-card h3{font-size:17px}
.tool-card-tag{margin-top:6px}
.tool-card-arrow{align-self:center}
.directory-bottom{grid-template-columns:1fr;gap:20px;margin-top:48px;padding:20px}
.directory-bottom h2{font-size:18px}
}
@media(max-width:360px){
.as-brand img{width:90px}
.as-area{gap:8px;font-size:14px}
#toolsChrome .tools-lang-btn{min-width:56px}
.presets{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.tool-card,.card,.tools-icobtn,.tools-lang-btn,.dropzone,button,input,textarea,select{border:1px solid CanvasText!important}.as-brand img{forced-color-adjust:none}}

/* Overview without slogan: plain title, the list carries its own top rule. */
.directory-hero{padding-bottom:40px}
.tools-grid{border-top:1px solid var(--border)}
.directory-section-head+.tools-grid{border-top:0}
@media(max-width:680px){.directory-hero{padding-bottom:28px}}

/* Service lockup "asernus | tools": the same geometry in every Asernus service. */
.as-area{gap:0;margin-left:0;font:500 17px/1 'DM Sans',system-ui,sans-serif;letter-spacing:-.01em}
.as-area::before{content:"";flex:none;width:1px;height:22px;margin:0 14px 0 6px;background:var(--border-strong)}
/* Account button: identical to the one on www.asernus.eu */
.as-account{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-left:8px;padding:0 14px 0 12px;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);font:500 14px/1 'DM Sans',system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:border-color 160ms,color 160ms}
.as-account svg{flex:none;color:var(--icon);transition:color 160ms}
.as-account:hover{border-color:var(--primary);color:var(--primary)}
.as-account:hover svg{color:inherit}
/* Tool pages share the header's left edge instead of a narrower centred column. */
main{width:min(var(--tools-width),calc(100% - 64px))}
main:not(.tool-wide):not(.tools-directory)>*{max-width:920px}
@media(max-width:1050px){main,main.tool-wide,main.tools-directory{width:calc(100% - 48px)}}
@media(max-width:680px){
.as-area{font-size:15px}
.as-area::before{height:18px;margin:0 11px 0 7px}
.as-account{min-width:44px;min-height:44px;margin-left:0;padding:0;border:0;justify-content:center}
.as-account span{display:none}
.as-account svg{width:21px;height:21px}
main,main.tool-wide,main.tools-directory{width:calc(100% - 32px)}
}
/* Language trigger: same geometry and chevron as on www.asernus.eu. */
#toolsChrome .tools-lang-btn{min-width:68px;padding:8px;gap:8px;border:0;border-radius:7px;font-size:12px}
#toolsChrome .tools-icobtn{border:0;border-radius:7px}
#toolsChrome .tools-language-chevron{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
@media(max-width:680px){#toolsChrome .tools-lang-btn{min-width:68px;gap:7px}}
/* Same spacing between header controls as on www.asernus.eu. */
#toolsChrome{gap:8px}
@media(max-width:680px){#toolsChrome{gap:4px}}
@media(max-width:680px){#toolsChrome .tools-icobtn{min-width:44px;width:44px}}
/* Single-column tools: one centred 920 px column under the full-width header.
   The overview and XCStrings Studio keep the full content width. */
main:not(.tool-wide):not(.tools-directory){width:min(920px,calc(100% - 64px))}
@media(max-width:1050px){main:not(.tool-wide):not(.tools-directory){width:min(920px,calc(100% - 48px))}}
@media(max-width:680px){main:not(.tool-wide):not(.tools-directory){width:calc(100% - 32px)}}