:root{--g:#0e5a4f;--g2:#0a463d;--o:#f5a524;--navy:#0b1b2b;--bg:#f5f8fa;--mint:#e6f2ef;--mut:#52606d;--line:#dfe6ec;--err:#b00020;--fa:#0e5a4f;--fa-bg:#0e5a4f1a}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--navy);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow-wrap:break-word}
a{color:var(--g)}a:hover{color:var(--g2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--o);outline-offset:2px}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99;border-radius:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
ul,ol{margin:0;padding:0;list-style:none}
/* header */
header.site{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:10}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;min-height:4rem;position:relative}
.brand{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);text-decoration:none;padding:.5rem 0}.brand b{color:var(--g);font-weight:800}.brand i{color:var(--o);font-style:normal}
header nav>ul{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
header nav a,.menu summary{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .9rem;border-radius:999px;font-weight:600;font-size:.95rem;color:var(--navy);text-decoration:none;cursor:pointer}
header nav a:hover,.menu summary:hover,.menu[open] summary{background:var(--mint);color:var(--g)}
.menu summary{list-style:none}.menu summary::-webkit-details-marker{display:none}.menu summary::after{content:"▾";margin-left:.35rem;font-size:.8rem}
.menu>ul{position:absolute;right:0;top:100%;margin-top:.25rem;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(11,27,43,.14);padding:.6rem;display:grid;grid-template-columns:1fr 1fr;gap:.1rem .5rem;width:min(26rem,calc(100vw - 2.5rem));z-index:30}
.menu>ul a{display:flex;border-radius:8px;width:100%}
/* hero + search */
.hero{background:radial-gradient(48rem 24rem at 0 0,#e6f2ef,transparent 65%),radial-gradient(40rem 22rem at 100% 0,#fbedd3,transparent 65%);padding:1.5rem 0 2rem}
.hero-in{display:grid;gap:1.25rem;align-items:center}
@media(min-width:60rem){.hero-in{grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:3.5rem}}
h1{font-size:clamp(1.4rem,4.5vw,2.1rem);line-height:1.2;margin:.5rem 0 .35rem;font-weight:800;letter-spacing:-.02em}
.hero h1{font-size:clamp(2rem,6vw,3rem);margin-top:0}
h2{font-size:1.35rem;line-height:1.3;margin:2.25rem 0 .75rem;font-weight:800;letter-spacing:-.01em}h3{font-size:1.05rem;margin:1.25rem 0 .5rem}
.lead{color:var(--mut);font-size:1rem;line-height:1.5;margin:.2rem 0 .6rem;max-width:46rem}
.search{position:relative;max-width:34rem;margin-top:1.25rem}.search .row{display:flex;background:#fff;border-radius:999px;box-shadow:0 6px 20px rgba(11,27,43,.1);padding:.35rem;gap:.35rem}
.search input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:999px;padding:0 1rem;min-height:3rem}
.search input:focus-visible{outline:0}.search .row:focus-within{outline:3px solid var(--o)}
#qres{position:absolute;left:0;right:0;top:100%;margin-top:.4rem;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(11,27,43,.14);z-index:20;overflow:hidden}
#qres:empty{display:none}#qres li{border-bottom:1px solid var(--line)}#qres li:last-child{border:0}#qres a,#qres li>span{display:block;padding:.65rem 1rem;color:var(--navy);text-decoration:none}#qres a:hover,#qres a:focus-visible{background:var(--mint)}
/* buttons + forms */
label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.3rem}
input,select{font:inherit;color:var(--navy);width:100%;min-height:3rem;padding:.5rem .8rem;border:1.5px solid #c5d1da;border-radius:10px;background:#fff}
select{text-overflow:ellipsis}
.btn,button{font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:3rem;padding:.55rem 1.25rem;border-radius:999px;border:0;background:var(--g);color:#fff;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover,button:hover{background:var(--g2);color:#fff}.btn.alt{background:var(--o);color:var(--navy)}.btn.alt:hover{background:#e0931a;color:var(--navy)}
button.swap{background:#fff;color:var(--g);border:2px solid var(--g);width:100%}button.swap:hover{background:var(--mint);color:var(--g)}
/* converter card: compact; stacked (full unit names visible) on phones and tablets, one row on wide screens */
.calc{background:#fff;border:1px solid var(--line);border-top:5px solid var(--fa);border-radius:16px;box-shadow:0 6px 24px rgba(11,27,43,.07);padding:.85rem;margin:.65rem 0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.75rem;align-items:start}
.calc>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.hero .calc>h2{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;grid-column:1/-1;margin:0 0 .5rem;font-size:1.05rem}
.calc>.cgrid,.calc>.error,.calc>.copied{grid-column:1/-1}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem;align-items:end}.cgrid>*{min-width:0}
.cgrid label{margin-bottom:.15rem;font-size:.82rem}
.cgrid input,.cgrid select{min-height:2.8rem;padding:.35rem .65rem;font-size:1rem}
.cgrid .big{font-size:1.15rem;font-weight:600}
.cgrid .fullrow,.cgrid .fullrow.small{grid-column:1/-1;max-width:none}
.cgrid>div>.swap{display:flex;margin:0 auto}
button.swap{background:#fff;color:var(--g);border:2px solid var(--g);width:2.75rem;height:2.75rem;min-height:2.75rem;padding:0;border-radius:50%;line-height:1}button.swap:hover{background:var(--mint);color:var(--g)}
button.swap svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@supports selector(:has(*)){
.cgrid:has(.fullrow.small){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cgrid:has(.fullrow.small)>div{grid-column:1/-1}
.cgrid:has(.fullrow.small)>.fullrow:not(.small){grid-column:1}
.cgrid:has(.fullrow.small)>.fullrow.small{grid-column:2;grid-row:1}
}
.cgrid.stack{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cgrid.stack>div{grid-column:1/-1}
.cgrid.stack>.fullrow:nth-child(1){grid-column:1}.cgrid.stack>.fullrow:nth-child(2){grid-column:2}
.error{color:var(--err);font-weight:700;margin:.5rem 0 0}.error:empty{display:none}
.result{grid-column:1;margin:.6rem 0 0;padding:.55rem .9rem;background:var(--mint);border-left:5px solid var(--fa);border-radius:10px;font-size:1rem;line-height:1.35;min-height:4.2rem;display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere}
.result strong{display:block;font-size:1.3rem;line-height:1.3;color:var(--navy)}
.calc>#copy{grid-column:2;margin-top:.6rem;align-self:stretch;min-height:3rem;padding:.4rem .9rem;font-size:.9rem}
.calc>.btn{grid-column:1/-1;margin-top:.55rem;min-height:2.8rem}
.hero .result{grid-column:1/-1}
.copied{margin:.35rem 0 0;color:var(--g);font-weight:600}.copied:empty{display:none}
@media(min-width:48rem){
.calc{padding:1.1rem 1.4rem}
.result{min-height:3.6rem;flex-direction:row;align-items:baseline;justify-content:flex-start;flex-wrap:wrap;column-gap:.5rem}
.result strong{display:inline;font-size:1.5rem}
.calc>#copy{padding:.4rem 1.2rem;font-size:1rem}
.hero .result{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;min-height:4.2rem}.hero .result strong{display:block;font-size:1.4rem}
}
@media(min-width:64rem){
.cgrid:not(.stack){grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) 3rem minmax(0,1.2fr);gap:.75rem}
.cgrid:not(.stack)>.fullrow:not(.small){grid-column:auto}
.cgrid:not(.stack) .fullrow.small{grid-column:1/-1}
@supports selector(:has(*)){
.cgrid:not(.stack):has(.fullrow.small){grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) 3rem minmax(0,1.2fr) minmax(0,.9fr)}
.cgrid:not(.stack):has(.fullrow.small)>div{grid-column:auto}
.cgrid:not(.stack):has(.fullrow.small)>.fullrow:not(.small){grid-column:auto}
.cgrid:not(.stack):has(.fullrow.small)>.fullrow.small{grid-column:5;grid-row:1}
}
}
@media(max-width:23.5rem){.cgrid select{font-size:.9rem}}
@media(max-width:47.99rem){
.hero .calc>h2{display:none}
.wrap:not(.hero-in):has(>.calc){display:flex;flex-direction:column}
.wrap:not(.hero-in):has(>.calc)>*{order:3}
.wrap:not(.hero-in):has(>.calc)>.crumbs{order:0}
.wrap:not(.hero-in):has(>.calc)>h1{order:1}
.wrap:not(.hero-in):has(>.calc)>.calc{order:2}
}
/* content */
.crumbs ol{display:flex;flex-wrap:wrap;gap:.1rem .4rem;margin-top:.6rem;font-size:.85rem;color:var(--mut)}.crumbs li+li::before{content:"›";margin-right:.4rem}
code{background:#fff;border:1px solid var(--line);padding:.2rem .5rem;border-radius:6px;overflow-wrap:anywhere;font-size:.95em}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px;max-width:34rem}
table{border-collapse:collapse;width:100%}th,td{padding:.55rem 1rem;text-align:left;border-bottom:1px solid var(--line)}th{background:var(--mint)}tr:last-child td{border:0}td{font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chips a{display:inline-flex;align-items:center;min-height:2.5rem;padding:.35rem .95rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);text-decoration:none;font-weight:500}.chips a:hover{border-color:var(--g);color:var(--g)}
.notes{padding-left:1.2rem;list-style:disc}.notes li{margin:.3rem 0}
/* category cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.25rem}
.fcard{background:#fff;border-radius:14px;border-top:4px solid var(--fa);box-shadow:0 1px 4px rgba(11,27,43,.1);padding:1.25rem;display:flex;flex-direction:column}
.fhead{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}.fhead h3{margin:0;font-size:1.1rem}
.ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:12px;background:var(--fa-bg);color:var(--fa);font-weight:800;font-size:.85rem}
.fcard ul{flex:1}.fcard li{border-bottom:1px solid var(--line)}.fcard li a{display:block;padding:.55rem 0;color:var(--navy);text-decoration:none;font-size:.95rem}.fcard li a:hover{color:var(--fa);text-decoration:underline}
.fcard .all{margin-top:.9rem;font-weight:700;color:var(--fa);text-decoration:none}.fcard .all:hover{text-decoration:underline}
.points{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.points div{background:#fff;border-radius:12px;padding:1rem 1.25rem;border:1px solid var(--line)}.points h3{margin-top:0}
.group{margin-top:1.5rem}.cat-head{border-left:5px solid var(--fa);padding-left:.9rem}
/* footer */
footer.site{background:var(--navy);color:#b8c4d0;margin-top:3.5rem;padding:2rem 0;text-align:center;font-size:.92rem}
footer.site ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem 1.1rem;margin:0 0 1rem}footer.site a{display:inline-block;padding:.4rem 0;color:#fff;text-decoration:none}footer.site a:hover{color:var(--o);text-decoration:underline}
footer.site p{margin:.4rem auto;max-width:44rem}
@media(max-width:47.99rem){.bar{min-height:0;padding:.3rem 0}.brand{font-size:1.25rem;padding:.2rem 0}header nav a,.menu summary{min-height:2.5rem;padding:0 .65rem;font-size:.9rem}.hero{padding:1rem 0 1.5rem}}

.about{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.about>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.25rem 1.25rem 1rem}.about h3{margin:1rem 0 .4rem}.about p{margin:0}
.faq h3{font-size:1.05rem;margin:1.5rem 0 .35rem}.faq p{margin:0;max-width:46rem}.muted{color:var(--mut);margin-top:0}
.examples{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.examples li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.55rem .9rem}.examples span{color:var(--mut);font-variant-numeric:tabular-nums}

/* Responsive, optional AdSense placements. No empty space is rendered unless valid account IDs are configured. */
.ad-slot{display:block;width:100%;max-width:970px;min-height:90px;margin:1.5rem auto;padding:0;overflow:hidden;clear:both}
.ad-slot ins{display:block;width:100%;min-height:90px}
@media(max-width:600px){.ad-slot{min-height:100px;margin:1rem auto}.ad-slot ins{min-height:100px}}

.f-length{--fa:#0e5a4f;--fa-bg:#0e5a4f1a}
.f-mass{--fa:#be123c;--fa-bg:#be123c1a}
.f-temperature{--fa:#4338ca;--fa-bg:#4338ca1a}
.f-area{--fa:#b45309;--fa-bg:#b453091a}
.f-volume{--fa:#0e5a4f;--fa-bg:#0e5a4f1a}
.f-time{--fa:#be123c;--fa-bg:#be123c1a}
.f-speed{--fa:#4338ca;--fa-bg:#4338ca1a}
.f-pressure{--fa:#b45309;--fa-bg:#b453091a}
.f-energy{--fa:#0e5a4f;--fa-bg:#0e5a4f1a}
.f-power{--fa:#be123c;--fa-bg:#be123c1a}
.f-digital{--fa:#4338ca;--fa-bg:#4338ca1a}

/* Two-field converter (From / To), either field converts into the other */
.calc.cv2{display:block;max-width:38rem;padding:1rem 1.1rem 1.1rem}
.cv2 .cv{display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;column-gap:.25rem;align-items:center}
.cv2 .cvrows{display:grid;grid-template-columns:3.4rem minmax(0,1fr) minmax(5.5rem,max-content);align-items:center;gap:.7rem}
.cv2 .cvrow{display:contents}
.cv2 .cvrow label{margin:0;text-align:right;font-size:1rem;font-weight:600}
.cv2 .cvrow input{min-height:3rem;font-size:1.15rem;font-weight:600;border:1.5px solid #8fa1b0;border-radius:8px;box-shadow:0 1px 3px rgba(11,27,43,.28)}
.cv2 .cvu{font-weight:800;font-size:1rem;line-height:1.25;overflow-wrap:anywhere}
.cv2 button.swapi{grid-column:2;grid-row:1;justify-self:center;background:transparent;border:0;border-radius:6px;box-shadow:none;color:var(--g);width:2.75rem;height:2.75rem;min-height:2.75rem;padding:0}
.cv2 button.swapi:hover{background:var(--mint);color:var(--g2)}
.cv2 button.swapi svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cv2 .cvprec{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 0 4.1rem;max-width:16rem}
.cv2 .cvprec label{margin:0;white-space:nowrap;font-size:.9rem}
.cv2 .cvprec select{min-height:2.5rem}
.cv2 .cvbtns{display:flex;gap:.8rem;margin:.9rem 0 0 4.1rem}
.cv2 .cvbtns button{min-height:2.75rem;padding:.4rem 1.3rem;border-radius:8px;background:var(--g);color:#fff;box-shadow:0 2px 3px rgba(11,27,43,.35)}
.cv2 .cvbtns button:hover{background:var(--g2)}
.cv2 .error{margin:.7rem 0 0}
@media(max-width:30rem){
.cv2 .cvrows{display:block}
.cv2 .cvrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l u" "i i";row-gap:.25rem;margin-bottom:.7rem}
.cv2 .cvrow label{grid-area:l;text-align:left;font-size:.9rem}
.cv2 .cvu{grid-area:u;text-align:right;font-size:.9rem;align-self:end;line-height:1.2}
.cv2 .cvrow label{align-self:end;line-height:1.2}
.cv2 .cvrow input{grid-area:i}
.cv2 .cvprec,.cv2 .cvbtns{margin-left:0}
}

/* Home quick converter: same rows as the other pages; unit dropdown sits where the unit label does */
.cv2.cvh{max-width:none}
.cvh .cvcat{display:flex;align-items:center;gap:.7rem;margin:0 0 .8rem}
.cvh .cvcat label{margin:0;font-weight:600;white-space:nowrap;font-size:1rem}
.cvh .cvcat select{min-height:2.6rem;flex:1;min-width:0;max-width:20rem}
.cvh .cvrow select{min-height:2.75rem;width:14.5rem;min-width:0;font-weight:700;font-size:.92rem}
.cvh .cvrows{grid-template-columns:3.4rem minmax(0,1fr) 14.5rem}
.cvh>.btn{margin-top:.9rem}
@media(min-width:60rem){.hero-in{grid-template-columns:minmax(0,40rem) minmax(0,1fr);gap:2.5rem}}
@media(max-width:47.99rem){.cvh .cvrows{grid-template-columns:3.4rem minmax(0,1fr) minmax(8rem,12rem)}.cvh .cvrow select{width:100%}}
@media(max-width:30rem){
.cvh .cvrows{display:block}
.cvh .cvrow select{grid-area:u;width:auto;max-width:100%;justify-self:end;min-height:2.5rem;font-size:.9rem}
}

/* v11: header, hero converter alignment */
header.site .wrap{padding-left:1.25rem;padding-right:1.25rem}
.brand{display:inline-flex;align-items:baseline;font-size:1.55rem}
.hero-in{align-items:center}
.calc.cvh{display:block;max-width:none;padding:1.1rem 1.25rem 1.25rem}
.calc.cvh>h2{display:block;margin:0 0 .9rem;font-size:1.1rem}
.calc.cvh .cvcat{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.75rem;align-items:center;margin:0 0 .9rem}
.calc.cvh .cvcat label{margin:0}
.calc.cvh .cvcat select{width:100%;max-width:none;min-height:2.9rem}
.calc.cvh .cv{display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;column-gap:.5rem;align-items:center}
.calc.cvh .cvrows{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,12rem);gap:.75rem;align-items:center}
.calc.cvh .cvrow{display:contents}
.calc.cvh .cvrow label{grid-area:auto;margin:0;text-align:left;align-self:center;font-size:.95rem}
.calc.cvh .cvrow input{grid-area:auto;width:100%;min-height:2.9rem}
.calc.cvh .cvrow select{grid-area:auto;width:100%;max-width:100%;justify-self:stretch;min-height:2.9rem;font-size:.92rem}
.calc.cvh button.swapi{grid-column:2;grid-row:1;justify-self:center}
.calc.cvh .cvbtns{display:flex;gap:.75rem;margin:1rem 0 0 6.25rem}
.calc.cvh>.btn{display:inline-flex;margin:.9rem 0 0 6.25rem}
@media(max-width:47.99rem){
.calc.cvh .cvcat{grid-template-columns:1fr;gap:.3rem}
.calc.cvh .cvrows{display:block}
.calc.cvh .cvrow{display:grid;grid-template-areas:none;grid-template-rows:none;grid-template-columns:minmax(0,1fr);gap:.35rem;margin-bottom:.9rem}
.calc.cvh .cvrow label{font-size:.9rem}
.calc.cvh .cvrow select{grid-area:auto;justify-self:stretch;width:100%}
.calc.cvh button.swapi{grid-row:auto}
.calc.cvh .cv{grid-template-columns:minmax(0,1fr) 2.75rem}
.calc.cvh .cvbtns,.calc.cvh>.btn{margin-left:0}
}

@media(max-width:47.99rem){.calc.cvh .cvrow label,.calc.cvh .cvrow input,.calc.cvh .cvrow select{grid-area:auto;grid-column:1;justify-self:stretch;text-align:left}.calc.cvh .cvrow select{max-width:100%}.calc.cvh button.swapi{align-self:center}}