:root{color-scheme:light;--bg:#f6f8fc;--card:#fff;--tx:#111b2e;--mu:#5b6780;--br:#dfe5f1;--ac:#4f46e5;--ac2:#7c3aed;--ok:#059669;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0c1220;--card:#151d30;--tx:#eaf0ff;--mu:#9aa7c4;--br:#26314c;--ok:#34d399}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0c1220;--card:#151d30;--tx:#eaf0ff;--mu:#9aa7c4;--br:#26314c;--ok:#34d399}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.w{max-width:1080px;margin:0 auto;padding:0 20px}
header{background:var(--card);border-bottom:1px solid var(--br);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
header .w{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;font-size:20px;display:flex;gap:8px;align-items:center}.logo i{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--ac),var(--ac2));display:inline-block}
nav a{color:var(--mu);text-decoration:none;margin-left:20px;font-size:14px;font-weight:600}
.hero{text-align:center;padding:44px 0 24px}.hero h1{font-size:clamp(28px,5vw,44px);margin:0 0 8px;letter-spacing:-.02em}.hero p{color:var(--mu);margin:0 auto 24px;max-width:560px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.chip{border:1px solid var(--br);background:var(--card);color:var(--tx);padding:8px 14px;border-radius:999px;font:600 14px inherit;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:#fff}
.box{background:var(--card);border:1px solid var(--br);border-radius:18px;padding:22px;max-width:760px;margin:0 auto;text-align:left;box-shadow:0 8px 30px rgba(79,70,229,.08)}
.drop{border:2px dashed var(--br);border-radius:14px;padding:34px 16px;text-align:center;color:var(--mu);transition:.15s}
.drop.on{border-color:var(--ac);background:rgba(79,70,229,.06)}
.btn{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border:0;padding:11px 22px;border-radius:10px;font:700 15px inherit;cursor:pointer;text-decoration:none;display:inline-block}
.btn:disabled{opacity:.5;cursor:not-allowed}
.opts{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0;align-items:end}
.opts label{display:flex;flex-direction:column;font-size:13px;color:var(--mu);font-weight:600;gap:4px}
select,input[type=number],input[type=text]{background:var(--bg);color:var(--tx);border:1px solid var(--br);border-radius:8px;padding:8px 10px;font:inherit;min-width:110px}
.list{margin-top:14px;display:grid;gap:8px}.row{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--br);border-radius:10px;padding:9px 12px;font-size:14px;overflow-wrap:anywhere}
.row small{color:var(--mu)}.row a{color:var(--ok);font-weight:700;text-decoration:none;white-space:nowrap}
.msg{color:var(--mu);font-size:14px;margin-top:10px}
h2{font-size:26px;margin:52px 0 6px;letter-spacing:-.01em}.sub{color:var(--mu);margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--br);border-radius:14px;padding:18px;cursor:pointer;text-align:left;color:var(--tx);font:inherit}
.card:hover{border-color:var(--ac)}.card b{display:block;margin-bottom:2px}.card span{color:var(--mu);font-size:14px}
.card.off{opacity:.6;cursor:default}.tag{font-size:11px;background:var(--br);padding:2px 8px;border-radius:99px;margin-left:6px;font-weight:700}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
footer{margin-top:60px;border-top:1px solid var(--br);padding:26px 0;color:var(--mu);font-size:14px;text-align:center}
.logo{text-decoration:none;color:var(--tx)}.logo img{width:28px;height:28px}a.chip{text-decoration:none}a.card{display:block;text-decoration:none}
.crumb{font-size:14px;color:var(--mu);padding-top:18px}.crumb a{color:var(--ac)}
.c{max-width:760px;margin:0 auto}.c h2{font-size:22px;margin:36px 0 10px}.c p,.c li{color:var(--mu)}.c ol{padding-left:22px}
details{background:var(--card);border:1px solid var(--br);border-radius:10px;padding:12px 16px;margin-bottom:8px}summary{cursor:pointer;font-weight:700}details p{margin:8px 0 0}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:left;margin-bottom:20px}.fg a{display:block;color:var(--mu);text-decoration:none;margin:4px 0}.fg b{color:var(--tx)}
.lg{max-width:760px;margin:0 auto;padding:30px 0}.lg h1{font-size:34px}.lg h2{font-size:20px;margin:28px 0 8px}.lg p,.lg li{color:var(--mu)}.lg a{color:var(--ac)}
.logo{font-weight:800;letter-spacing:-.02em}.wm em{font-style:normal;color:var(--lk)}.logo img{width:32px;height:32px}:root{--lk:#4f46e5}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--lk:#a5b4fc}}:root[data-theme="dark"]{--lk:#a5b4fc}footer a,.lg a,.crumb a{color:var(--lk)}

.hero .drop p{max-width:none;margin:6px 0 14px}
header .w{gap:12px}nav{display:flex;align-items:center;white-space:nowrap}nav a{white-space:nowrap}
@media (max-width:560px){nav a{margin-left:14px;font-size:13px}.logo{font-size:18px;gap:6px}.logo img{width:28px;height:28px}}

.logo{gap:0}.logo img{height:40px;width:auto;display:block}@media (max-width:560px){.logo img{height:30px;width:auto}}

.drop .note{font-size:13px;color:var(--mu);margin:12px 0 0}

.logo{gap:0}.logo img{height:38px;width:auto;display:block}@media (max-width:560px){.logo img{height:32px;width:auto}}

/* ---- typography: Poppins (headings, buttons, menu) + Inter (body) — self-hosted ---- */
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format("woff2")}
:root{--fh:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fb:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{font-family:var(--fb);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--fh);font-weight:700;text-wrap:balance}
.hero h1{font-size:clamp(32px,5.6vw,54px);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px}
.hero p{font-size:clamp(16px,2vw,18px)}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.2;letter-spacing:-.02em}
.c h2{font-size:22px}.lg h1{font-size:clamp(28px,4vw,38px);letter-spacing:-.02em}.lg h2{font-size:20px}
nav a{font-family:var(--fh);font-weight:500;font-size:14px}
.btn{font-family:var(--fh);font-weight:500;font-size:15px;letter-spacing:.01em}
.chip{font-family:var(--fh);font-weight:500;font-size:14px}
.card b{font-family:var(--fh);font-weight:700;font-size:16px;letter-spacing:-.01em}
summary{font-family:var(--fh);font-weight:500;font-size:16px}
.fg b{font-family:var(--fh);font-weight:700;color:var(--tx)}
.opts label{font-weight:600}
button,select,input{font-family:var(--fb)}
.btn,.chip{font-family:var(--fh)}
.drop .note{font-weight:600}
@media (max-width:560px){nav a{font-size:12.5px;margin-left:10px}.logo img{height:28px}}
@media (max-width:345px){nav a:first-child{display:none}}
@media (max-width:400px){nav a{font-size:12px;margin-left:8px}.logo img{height:27px}header .w{gap:8px}}

/* ---- hover / press / focus states (blue) ---- */
:root{--hv:rgba(79,70,229,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hv:rgba(165,180,252,.14)}}
:root[data-theme="dark"]{--hv:rgba(165,180,252,.14)}
nav a,.chip,a.card,.btn,footer a,.crumb a{transition:color .15s,background-color .15s,border-color .15s,box-shadow .2s,transform .2s,filter .15s}
nav a{position:relative;padding:6px 0}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--lk);transform:scaleX(0);transform-origin:left;transition:transform .2s}
nav a:active,nav a:focus-visible{color:var(--lk)}
nav a:active::after,nav a:focus-visible::after{transform:scaleX(1)}
.chip:active{background:var(--ac);border-color:var(--ac);color:#fff;transform:translateY(0)}
a.card:active{border-color:var(--ac);background:var(--hv)}
.btn:not(:disabled):active{filter:brightness(.95);transform:translateY(0)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
@media (hover:hover){
 nav a:hover{color:var(--lk)}
 nav a:hover::after{transform:scaleX(1)}
 .chip:hover{border-color:var(--ac);color:var(--lk);background:var(--hv);transform:translateY(-1px)}
 .chip[aria-pressed=true]:hover{color:#fff;background:var(--ac)}
 a.card:hover{border-color:var(--ac);background:var(--hv);transform:translateY(-2px);box-shadow:0 10px 26px rgba(79,70,229,.14)}
 a.card:hover b{color:var(--lk)}
 footer a:hover,.crumb a:hover{color:var(--ac);text-decoration:underline}
 .btn:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 8px 20px rgba(79,70,229,.32);transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){nav a,.chip,a.card,.btn,nav a::after{transition:none!important}.chip:hover,a.card:hover,.btn:hover{transform:none!important}}
/* press state must win over hover */
.chip:active,.chip:hover:active{background:var(--ac);border-color:var(--ac);color:#fff;transform:translateY(0)}
a.card:active,a.card:hover:active{border-color:var(--ac);background:var(--hv);transform:translateY(0)}
nav a:active,nav a:hover:active{color:var(--lk)}

/* ---- calculators ---- */
.calc{max-width:760px}
.calc h3{font-size:16px;margin:0 0 4px;font-family:var(--fh)}
.calc .cs{padding-top:16px;margin-top:16px;border-top:1px solid var(--br)}
.calc .cs:first-child{border-top:0;margin-top:0;padding-top:0}
.calc .opts label{flex:1 1 150px}
.calc input,.calc select{width:100%;min-width:0}
.res{display:grid;gap:8px;margin:8px 0 4px}
.rr{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--br);border-radius:10px;padding:11px 14px;font-size:14.5px;color:var(--mu)}
.rr b{color:var(--tx);font-size:18px;font-family:var(--fh);text-align:right;overflow-wrap:anywhere}
.rr.big{margin-top:6px}
.res .rr:first-child{background:var(--hv);border-color:var(--ac)}
.res .rr:first-child b{color:var(--lk)}
.rr.big b{color:var(--lk)}
.note2{font-size:12.5px;color:var(--mu);margin:14px 0 0}
.tw{overflow-x:auto;border:1px solid var(--br);border-radius:10px;max-height:340px;overflow-y:auto}
.yt{width:100%;border-collapse:collapse;font-size:13.5px}
.yt th,.yt td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--br);white-space:nowrap}
.yt th:first-child,.yt td:first-child{text-align:left}
.yt th{position:sticky;top:0;background:var(--card);color:var(--mu);font-weight:600}
.c ul{padding-left:22px}
/* calculators: mobile fixes */
.rr b{white-space:nowrap;overflow-wrap:normal;flex-shrink:0}
.rr span{min-width:0}
.calc .opts label{flex:1 1 130px}
@media (max-width:420px){.rr{padding:10px 12px;font-size:13.5px}.rr b{font-size:16.5px}.calc .opts{gap:10px}}

/* contact form */
.cform{display:grid;gap:14px;max-width:560px;margin:10px 0 6px}
.cform label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--mu)}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--br);border-radius:10px;background:var(--card);color:var(--tx)}
.cform textarea{resize:vertical;min-height:130px}
.cform .btn{justify-self:start}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .note2{margin:0}

.sh{font-size:17px;margin:22px 0 10px;color:var(--mu);font-family:var(--fh)}
h2[id]{scroll-margin-top:80px}
.hero .chips{margin-top:18px}

/* currency converter */
.cc{align-items:end}
.cc label{flex:1 1 140px}
.cc select{width:100%;min-width:0}
.cc .swap{flex:0 0 auto;padding:10px 16px;font-size:18px;line-height:1}
.cout{background:var(--hv);border-color:var(--ac)}
.cout b{font-size:24px;color:var(--lk)}
.cout span{font-weight:600}
.rr b.sm{font-size:14px;font-family:var(--fb);font-weight:600;white-space:normal;text-align:right}
.yt small{color:var(--mu);margin-left:4px}
#ctb tr{cursor:pointer}
#ctb tr:hover td{background:var(--hv)}
@media (max-width:520px){.cc .swap{order:3;width:100%}.cc label:last-of-type{order:4}.cout b{font-size:20px}}

.calc h2{font-size:16px;margin:0 0 4px;font-family:var(--fh)}

.tagline{color:var(--lk);font-weight:700;font-family:var(--fh);letter-spacing:.03em;margin:0 0 8px;font-size:15px}
/* v5: hidden attribute, text tools, QR tool */
[hidden]{display:none!important}
.tx{width:100%;min-height:230px;resize:vertical;background:var(--bg);color:var(--tx);border:1px solid var(--br);border-radius:10px;padding:12px 14px;font:16px/1.55 var(--fb);box-sizing:border-box}
.tx:focus{outline:2px solid var(--ac);outline-offset:1px}
.tb2{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.btn.sec{background:var(--card);color:var(--tx);border:1px solid var(--br);box-shadow:none}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px;margin:14px 0}
.st{border:1px solid var(--br);border-radius:10px;padding:10px 12px;background:var(--card)}
.st b{display:block;font:700 22px var(--fh);color:var(--lk);overflow-wrap:anywhere}
.st span{font-size:12.5px;color:var(--mu)}
.bar{height:8px;border-radius:99px;background:var(--br);overflow:hidden;margin:8px 0 4px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .15s}
.bar.over i{background:#e11d48}
.qrow{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.qrow>div:first-child{flex:1 1 280px;min-width:0}.qrow>div:last-child{flex:0 1 300px;text-align:center}
#qc{max-width:100%;height:auto;border:1px solid var(--br);border-radius:8px;image-rendering:pixelated}
.qrow textarea,.qrow input[type=text],.qrow input[type=email],.qrow input[type=tel]{width:100%;min-width:0;box-sizing:border-box;background:var(--bg);color:var(--tx);border:1px solid var(--br);border-radius:8px;padding:8px 10px;font:inherit}
input[type=color]{width:100%;min-width:60px;height:38px;padding:2px;background:var(--bg);border:1px solid var(--br);border-radius:8px}
input[type=date]{background:var(--bg);color:var(--tx);border:1px solid var(--br);border-radius:8px;padding:8px 10px;font:inherit;min-width:0}
.rr.wrap{flex-wrap:wrap}.rr.wrap b{white-space:normal;flex-shrink:1;text-align:right;margin-left:auto}
.res .rr+.rr{margin-top:8px}
@media (max-width:420px){.st b{font-size:19px}}
.c .qa{border-left:4px solid var(--ac);background:var(--hv);padding:12px 14px;border-radius:8px;color:var(--tx);margin:0 0 18px}
.qrow .opts label{flex:1 1 150px;min-width:0}.qrow select{width:100%;min-width:0}
[data-qr] .note2,[data-text] .note2{font-size:13.5px;text-align:left;margin:12px 0 0}