*,*::before,*::after{
box-sizing:border-box;
}
html{
background:var(--bg1);
color:var(--tx1);
font-family:var(--ff3);
font-size:100%;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
scroll-behavior:smooth;
}
body{
margin:0;
font-size:var(--fz2);
line-height:var(--lh3);
font-weight:var(--fw1);
min-height:100vh;
display:flex;
flex-direction:column;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
main{
flex:1;
}
a{
color:inherit;
text-decoration:none;
text-underline-offset:0.2em;
}
a:hover{
color:var(--tx1);
}
a:not(.mark,.button,.small-button,.skip):hover{
text-decoration-line:underline;
text-decoration-thickness:2px;
}
img,svg{
display:block;
max-width:100%;
}
h1,h2,h3,p,ol,ul,figure,pre,dl,dd{
margin:0;
}
h1,h2,h3,.mark{
font-family:var(--ff1);
}
::selection{
background:var(--ac1);
color:var(--on1);
}
:focus-visible{
outline:2px solid var(--ac1);
outline-offset:3px;
border-radius:var(--br1);
}
.skip{
position:absolute;
left:var(--sp4);
top:-80px;
z-index:20;
background:var(--tx1);
color:var(--on1);
padding:var(--sp3) var(--sp4);
border-radius:var(--br1);
font-weight:var(--fw3);
text-decoration:none;
}
.skip:focus{
top:var(--sp3);
}
.sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}
.wrap{
width:100%;
max-width:calc(var(--pw1) + 2*var(--px1));
margin:0 auto;
padding:0 var(--px1);
}
.mono{
font-family:var(--ff2);
}
.site-head{
position:relative;
z-index:5;
}
.narrow{
max-width:calc(var(--pw3) + 2*var(--px1));
}
.site-head .wrap{
max-width:none;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:var(--sp5);
padding:var(--sp4);
}
.site-head .mark{
padding:0 0 0 14px;
}
.head-cta{
justify-self:end;
min-height:44px;
padding:0 var(--sp5);
font-size:var(--fz1);
}
.mark{
display:inline-flex;
align-items:baseline;
gap:0;
text-decoration:none;
font-weight:var(--fw4);
font-stretch:112%;
font-size:26px;
letter-spacing:var(--ls2);
line-height:1;
white-space:nowrap;
padding:var(--sp2) 0;
}
.mark-b{
color:var(--ac1);
}
.mark-c{
font-family:var(--ff2);
font-weight:var(--fw1);
font-stretch:100%;
font-size:var(--fz1);
letter-spacing:0;
color:var(--tx2);
max-width:0;
overflow:hidden;
opacity:0;
margin-left:0;
transition:max-width var(--tr2),opacity var(--tr2),margin-left var(--tr2);
}
.mark:hover .mark-c,.mark:focus-visible .mark-c{
max-width:20ch;
opacity:1;
margin-left:var(--sp3);
}
.nav{
display:flex;
gap:var(--sp5);
font-size:var(--fz1);
}
.nav a{
color:var(--tx2);
text-decoration:none;
padding:var(--sp2) 0;
transition:color var(--tr1);
}
.nav a:hover,.nav a[aria-current]{
color:var(--tx1);
}
.hero{
position:relative;
padding:clamp(48px,9vh,112px) 0 var(--sp9);
isolation:isolate;
}
.hero::before{
content:"";
position:absolute;
inset:-80px 0 0;
z-index:-1;
background-image:radial-gradient(circle at 1px 1px,rgba(243,241,236,0.09) 1px,transparent 0);
background-size:28px 28px;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 92%);
mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 92%);
pointer-events:none;
}
.kicker{
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
margin-bottom:var(--sp6);
display:flex;
align-items:center;
gap:0;
white-space:nowrap;
}
.kicker .si{
color:var(--ac1);
font-weight:var(--fw2);
}
.kicker .eq{
display:inline-block;
animation:reveal 300ms 260ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes reveal{
from{
clip-path:inset(0 100% 0 0);
opacity:0.4;
}
to{
clip-path:inset(0 0 0 0);
opacity:1;
}
}
.hero h1,.headline{
font-size:var(--fz7);
font-weight:var(--fw4);
font-stretch:108%;
letter-spacing:var(--ls1);
line-height:var(--lh1);
max-width:17ch;
text-wrap:balance;
}
.hero h1 .dot,.dot{
color:var(--ac1);
}
.lead{
margin-top:var(--sp6);
max-width:44ch;
font-size:clamp(22px,1.9vw,26px);
line-height:1.45;
color:var(--tx2);
letter-spacing:var(--ls3);
text-wrap:pretty;
}
.lead strong{
color:var(--tx1);
font-weight:var(--fw2);
}
.hero .wrap,.cta .wrap,.oops{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.steal{
width:100%;
margin-top:var(--sp7);
max-width:760px;
}
.section-head~.steal{
margin-inline:auto;
}
.steal-box{
display:flex;
align-items:center;
gap:var(--sp2);
background:var(--bg3);
border-radius:var(--br9);
padding:var(--sp2);
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.08);
transition:box-shadow var(--tr1),background var(--tr1);
}
.steal-box:focus-within{
background:var(--bg4);
box-shadow:inset 0 0 0 2px var(--ac1);
}
.steal-box .scheme{
font-family:var(--ff2);
color:var(--tx3);
padding-left:var(--sp5);
font-size:var(--fz2);
user-select:none;
}
.steal-box input{
flex:1;
min-width:0;
height:56px;
background:transparent;
border:0;
color:var(--tx1);
font-family:var(--ff2);
font-size:var(--fz3);
text-align:left;
padding:0 var(--sp2) 0 0;
}
.steal-box input::placeholder{
color:var(--tx3);
opacity:1;
}
.steal-box input:focus{
outline:none;
}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--sp2);
min-height:48px;
padding:0 var(--sp5);
border:0;
border-radius:var(--br9);
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:var(--fw3);
letter-spacing:var(--ls3);
text-decoration:none;
cursor:pointer;
white-space:nowrap;
transition:background var(--tr1),color var(--tr1),transform var(--tr1);
}
.button svg{
width:20px;
height:20px;
transition:transform var(--tr1);
}
.button:hover svg{
transform:translateX(3px);
}
.button:active{
transform:translateY(1px);
}
.button-hot{
background:var(--ac1);
color:var(--on1);
}
.button-hot:hover{
background:var(--ac2);
color:var(--on1);
}
.button-ghost{
background:var(--bg3);
color:var(--tx1);
}
.button-ghost:hover{
background:var(--bg4);
}
.steal-box .button{
min-height:56px;
padding:0 var(--sp6);
font-size:var(--fz3);
}
.steal-note{
margin-top:var(--sp4);
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--sp2) var(--sp5);
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.steal-note a,.example-head .meta a{
display:inline-block;
padding-block:2px;
}
.form-error{
display:block;
margin-top:var(--sp3);
color:var(--wn1);
font-size:var(--fz2);
}
.form-error:empty{
display:none;
}
.files{
margin-top:var(--sp7);
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--sp2);
list-style:none;
padding:0;
}
.files li{
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
background:var(--bg2);
border-radius:var(--br9);
padding:var(--sp1) var(--sp4);
}
.section{
padding:var(--sp9) 0;
}
.section-head{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:var(--sp5);
margin-bottom:var(--sp7);
}
.label{
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
margin-bottom:var(--sp4);
}
.section h2,.h2{
font-size:var(--fz6);
font-weight:var(--fw4);
font-stretch:106%;
letter-spacing:var(--ls1);
line-height:0.98;
max-width:16ch;
text-wrap:balance;
}
.section-head p{
max-width:38ch;
color:var(--tx2);
}
.tabs{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--sp2);
}
.tab{
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
background:transparent;
border:0;
border-radius:var(--br9);
padding:var(--sp2) var(--sp4);
min-height:44px;
cursor:pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
transition:background var(--tr1),color var(--tr1);
}
.tab:hover{
background:var(--bg3);
color:var(--tx1);
}
.tab[aria-selected=true]{
background:var(--tx1);
color:var(--on1);
}
.example-head{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:baseline;
gap:var(--sp2) var(--sp5);
margin-bottom:var(--sp3);
}
.example-head h3{
font-size:var(--fz5);
font-weight:var(--fw4);
font-stretch:106%;
letter-spacing:var(--ls2);
line-height:1;
overflow-wrap:anywhere;
}
.example-head .meta{
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.glance{
font-size:var(--fz3);
color:var(--tx2);
max-width:58ch;
margin-bottom:var(--sp6);
text-wrap:pretty;
}
.block{
display:grid;
grid-template-columns:minmax(0,250px) minmax(0,1fr);
gap:var(--sp4) var(--sp7);
padding:var(--sp6) 0;
border-top:1px solid var(--bg4);
}
.block-head h2,.block-head h3,.block-head h4{
font-size:var(--fz4);
font-weight:var(--fw3);
letter-spacing:var(--ls3);
line-height:1.2;
margin-bottom:var(--sp2);
}
.block-head p{
font-size:var(--fz1);
color:var(--tx2);
text-wrap:pretty;
}
.block-body{
min-width:0;
}
.sub{
margin:var(--sp5) 0 var(--sp3);
font-size:var(--fz1);
color:var(--tx2);
}
.empty{
color:var(--tx2);
}
.glance strong{
color:var(--tx1);
font-weight:var(--fw2);
}
.roles{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:var(--sp3);
list-style:none;
padding:0;
}
.swatch{
display:flex;
flex-direction:column;
gap:var(--sp2);
min-width:0;
}
.chip{
height:88px;
border-radius:var(--br2);
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.1);
}
.swatch .name{
font-size:var(--fz1);
font-weight:var(--fw2);
}
.swatch .hex{
font-family:var(--ff2);
font-size:var(--fz1);
}
.swatch .ratio{
font-size:15px;
color:var(--tx2);
}
.palette{
display:flex;
flex-wrap:wrap;
gap:var(--sp3) var(--sp5);
list-style:none;
padding:0;
}
.palette li{
display:flex;
align-items:center;
gap:var(--sp2);
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.palette .dot-c{
width:24px;
height:24px;
border-radius:var(--br9);
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.15);
flex:none;
}
.fonts{
display:grid;
gap:var(--sp4);
list-style:none;
padding:0;
}
.font{
display:grid;
grid-template-columns:auto 1fr;
gap:var(--sp1) var(--sp5);
align-items:baseline;
}
.font .aa{
grid-row:span 2;
font-size:56px;
font-weight:var(--fw3);
letter-spacing:var(--ls2);
line-height:1;
color:var(--tx1);
}
.font .fname{
font-size:var(--fz3);
font-weight:var(--fw2);
overflow-wrap:anywhere;
}
.font .fmeta{
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
overflow-wrap:anywhere;
}
.scale{
list-style:none;
padding:0;
display:grid;
gap:var(--sp3);
}
.scale li{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:baseline;
gap:var(--sp4);
min-width:0;
}
.scale .sample{
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
line-height:1.05;
font-weight:var(--fw2);
letter-spacing:var(--ls3);
-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);
mask-image:linear-gradient(to right,#000 85%,transparent);
}
.scale .tok{
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
white-space:nowrap;
}
.bars{
list-style:none;
padding:0;
display:grid;
gap:var(--sp2);
}
.bars li{
display:grid;
grid-template-columns:72px minmax(0,1fr);
align-items:center;
gap:var(--sp3);
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.bar{
height:14px;
border-radius:3px;
background:var(--tx1);
opacity:0.85;
max-width:100%;
min-width:2px;
}
.shapes{
list-style:none;
padding:0;
display:flex;
flex-wrap:wrap;
gap:var(--sp4);
}
.shapes li{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--sp2);
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.preview-stage .shapes li{
color:inherit;
}
.shape{
width:76px;
height:76px;
background:var(--bg5);
}
.shadow-box{
width:112px;
height:76px;
background:var(--tx1);
border-radius:var(--br2);
}
.preview{
display:inline-flex;
align-items:center;
justify-content:center;
font-family:var(--ff1);
white-space:nowrap;
}
.preview-stage{
border-radius:var(--br2);
padding:var(--sp6);
display:flex;
flex-wrap:wrap;
gap:var(--sp4);
align-items:center;
}
.dl{
display:grid;
grid-template-columns:max-content 1fr;
gap:var(--sp2) var(--sp5);
font-size:var(--fz1);
}
.dl dt{
font-family:var(--ff2);
color:var(--tx2);
}
.dl dd{
overflow-wrap:anywhere;
}
.code{
background:var(--bg1);
border-radius:var(--br2);
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.08);
}
.code-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp3);
padding:var(--sp2) var(--sp2) var(--sp2) var(--sp4);
background:var(--bg3);
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.code pre{
white-space:pre-wrap;
overflow-wrap:anywhere;
font-family:var(--ff2);
font-size:16px;
line-height:1.6;
color:var(--tx1);
padding:var(--sp5);
overflow:auto;
max-height:560px;
tab-size:2;
}
.code pre .h{
color:var(--ac1);
}
.code pre .q{
color:var(--tx2);
}
.code.fade{
position:relative;
}
.code.fade pre{
max-height:420px;
overflow:hidden;
}
.code.fade::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:120px;
background:linear-gradient(to bottom,rgba(10,10,11,0),var(--bg1));
pointer-events:none;
}
.small-button{
display:inline-flex;
align-items:center;
gap:var(--sp2);
min-height:36px;
padding:0 var(--sp4);
border:0;
border-radius:var(--br9);
background:var(--bg4);
color:var(--tx1);
font-family:var(--ff2);
font-size:var(--fz1);
cursor:pointer;
text-decoration:none;
}
.small-button:hover{
background:var(--bg5);
}
.steps{
list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--sp4);
counter-reset:step;
}
.steps li{
border-top:1px solid var(--bg4);
padding-top:var(--sp5);
}
.steps .n{
display:block;
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--ac1);
margin-bottom:var(--sp4);
}
.steps h3{
font-size:var(--fz5);
font-weight:var(--fw4);
font-stretch:106%;
letter-spacing:var(--ls2);
line-height:1;
margin-bottom:var(--sp3);
}
.steps p{
color:var(--tx2);
}
.exports{
list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
gap:var(--sp4);
}
.exports li{
border-top:1px solid var(--bg4);
padding-top:var(--sp5);
}
.exports .file{
display:inline-flex;
align-items:center;
gap:var(--sp2);
font-family:var(--ff2);
font-size:var(--fz3);
color:var(--tx1);
text-decoration:none;
margin-bottom:var(--sp2);
transition:color var(--tr1);
}
.exports .file:hover{
color:var(--ac1);
}
.exports .file .down{
color:var(--ac1);
}
.exports p{
color:var(--tx2);
}
.prompt{
margin-top:var(--sp8);
text-align:center;
justify-items:center;
display:grid;
gap:var(--sp3);
}
.prompt q{
font-family:var(--ff2);
font-size:var(--fz2);
color:var(--tx1);
quotes:none;
}
.prompt p{
color:var(--tx2);
}
.cta{
padding:var(--sp9) 0 var(--spa);
}
.cta .headline{
font-size:var(--fz6);
max-width:14ch;
}
.site-foot{
padding:var(--sp8) 0 var(--sp7);
color:var(--tx2);
font-size:var(--fz1);
text-align:center;
}
.foot-brand{
display:grid;
justify-items:center;
gap:var(--sp3);
}
.site-foot .mark{
font-size:26px;
color:var(--tx1);
}
.foot-cols{
display:grid;
grid-template-columns:repeat(4,minmax(0,200px));
justify-content:center;
gap:var(--sp6) var(--sp8);
margin:var(--sp7) 0;
text-align:left;
}
.foot-cols h2{
font-family:var(--ff2);
font-size:var(--fz1);
font-weight:var(--fw1);
letter-spacing:0;
color:var(--tx3);
margin-bottom:var(--sp3);
}
.foot-cols ul{
list-style:none;
padding:0;
display:grid;
gap:var(--sp2);
}
.foot-cols a{
display:inline-flex;
align-items:center;
gap:var(--sp2);
color:var(--tx1);
text-decoration:none;
}
.foot-cols a:hover,.foot-cols a[aria-current]{
color:var(--ac1);
}
.soon{
font-family:var(--ff2);
color:var(--ac1);
}
.toc{
margin:0 0 var(--sp2);
}
.toc ul{
list-style:none;
padding:0;
display:flex;
flex-wrap:wrap;
gap:var(--sp1) var(--sp4);
font-family:var(--ff2);
font-size:var(--fz1);
}
.toc a{
display:inline-block;
padding:var(--sp1) 0;
color:var(--tx2);
text-decoration:none;
}
.toc a:hover{
color:var(--ac1);
}
.scores{
list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--sp4);
margin:0 0 var(--sp6);
}
.scores a,.scores li{
display:flex;
flex-direction:column;
gap:var(--sp1);
text-decoration:none;
color:var(--tx1);
}
.scores a:hover .score-l{
color:var(--ac1);
}
.score-n{
font-family:var(--ff1);
font-size:var(--fz5);
font-weight:var(--fw4);
font-stretch:106%;
letter-spacing:var(--ls2);
line-height:1;
}
.score-n .of{
color:var(--tx3);
font-weight:var(--fw2);
}
.score-l{
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.example .scores{
margin-bottom:var(--sp5);
}
.score-line{
font-size:var(--fz1);
color:var(--tx2);
margin-bottom:var(--sp3);
}
.score-line strong{
color:var(--tx1);
font-weight:var(--fw3);
}
.checks{
list-style:none;
padding:0;
display:grid;
}
.check{
display:grid;
grid-template-columns:22px minmax(0,1fr) auto;
gap:0 var(--sp3);
align-items:baseline;
padding:var(--sp2) 0;
border-bottom:1px solid var(--bg3);
font-size:var(--fz1);
}
.check:last-child{
border-bottom:0;
}
.ck-mark svg{
width:18px;
height:18px;
transform:translateY(3px);
}
.check.pass .ck-mark{
color:var(--ok1);
}
.check.fail .ck-mark{
color:var(--ac1);
}
.check.na .ck-mark,.check.na .ck-label{
color:var(--tx3);
}
.ck-value{
font-family:var(--ff2);
font-size:15px;
color:var(--tx2);
text-align:right;
max-width:38ch;
overflow-wrap:anywhere;
}
.ck-why{
grid-column:2/4;
margin-top:var(--sp1);
font-size:15px;
color:var(--tx2);
max-width:64ch;
}
.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:var(--sp4);
margin-bottom:var(--sp2);
}
.stats dt{
font-family:var(--ff2);
font-size:15px;
color:var(--tx2);
}
.stats dd{
font-size:var(--fz4);
font-weight:var(--fw3);
letter-spacing:var(--ls3);
}
.weights{
list-style:none;
padding:0;
display:grid;
gap:var(--sp2);
}
.weights li{
display:grid;
grid-template-columns:130px minmax(0,1fr) auto;
align-items:center;
gap:var(--sp3);
font-size:var(--fz1);
}
.weights li:has(> :nth-child(2):last-child){
grid-template-columns:130px minmax(0,1fr);
}
.w-name{
color:var(--tx1);
}
.w-note{
font-family:var(--ff2);
font-size:15px;
color:var(--tx2);
}
.weights .bar{
background:var(--ac1);
}
.pairs{
list-style:none;
padding:0;
display:grid;
gap:var(--sp2);
font-family:var(--ff2);
font-size:15px;
color:var(--tx2);
}
.pairs li{
display:flex;
align-items:center;
gap:var(--sp3);
}
.pair{
width:44px;
height:32px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--br1);
font-family:var(--ff1);
font-weight:var(--fw3);
font-size:var(--fz1);
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.12);
flex:none;
}
.snippet{
display:grid;
gap:2px;
max-width:600px;
}
.sn-url{
font-family:var(--ff2);
font-size:15px;
color:var(--tx2);
overflow-wrap:anywhere;
}
.sn-title{
font-size:var(--fz3);
color:#8ab4f8;
line-height:1.3;
}
.sn-desc{
font-size:var(--fz1);
color:var(--tx2);
}
.block-body>.dl{
margin-top:var(--sp4);
}
.fine-note{
margin-top:var(--sp3);
font-size:15px;
color:var(--tx3);
}
.table-wrap{
overflow-x:auto;
}
.table{
width:100%;
border-collapse:collapse;
font-size:var(--fz1);
}
.table th{
font-family:var(--ff2);
font-weight:var(--fw1);
font-size:15px;
color:var(--tx2);
text-align:left;
padding:var(--sp2) var(--sp3) var(--sp2) 0;
border-bottom:1px solid var(--bg4);
white-space:nowrap;
}
.table td{
padding:var(--sp2) var(--sp3) var(--sp2) 0;
border-bottom:1px solid var(--bg3);
vertical-align:baseline;
overflow-wrap:anywhere;
}
.table tr:last-child td{
border-bottom:0;
}
.table td:first-child{
color:var(--tx1);
}
.outline{
list-style:none;
padding:0;
display:grid;
gap:var(--sp1);
font-size:var(--fz1);
}
.outline .tag{
font-family:var(--ff2);
font-size:14px;
color:var(--tx3);
margin-right:var(--sp2);
}
.outline .lv2{
padding-left:16px;
}
.outline .lv3{
padding-left:32px;
}
.outline .lv4,.outline .lv5,.outline .lv6{
padding-left:48px;
}
.proof{
list-style:none;
padding:0;
display:grid;
gap:var(--sp1);
font-size:15px;
color:var(--tx2);
}
.proof strong{
color:var(--tx1);
font-weight:var(--fw2);
margin-right:var(--sp2);
}
.dl .links{
display:flex;
flex-wrap:wrap;
gap:var(--sp1) var(--sp4);
}
.vs{
font-family:var(--ff2);
font-weight:var(--fw1);
color:var(--tx3);
font-size:0.5em;
letter-spacing:0;
vertical-align:middle;
}
.compare-intro{
padding-top:var(--sp8);
padding-bottom:var(--sp8);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.compare-form{
width:100%;
max-width:860px;
margin-top:var(--sp7);
display:flex;
align-items:flex-end;
gap:var(--sp3);
text-align:left;
}
.again .compare-form{
margin-inline:auto;
}
.compare-form .vs{
font-size:var(--fz1);
padding-bottom:18px;
}
.pair-field{
flex:1;
min-width:0;
display:grid;
gap:var(--sp2);
}
.pair-field label{
font-family:var(--ff2);
font-size:15px;
color:var(--tx2);
}
.pair-field input{
height:56px;
width:100%;
padding:0 var(--sp5);
border:0;
border-radius:var(--br9);
background:var(--bg3);
color:var(--tx1);
font-family:var(--ff2);
font-size:var(--fz2);
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.08);
}
.pair-field input:focus{
outline:none;
background:var(--bg4);
box-shadow:inset 0 0 0 2px var(--ac1);
}
.pair-field input::placeholder{
color:var(--tx3);
opacity:1;
}
.compare-form .button{
min-height:56px;
}
.compare-wait .progress li{
justify-content:space-between;
max-width:420px;
}
.compare-wait h1 .vs{
font-size:0.4em;
}
.cmp-table td{
width:36%;
}
.cmp-table td:first-child{
width:28%;
}
.cmp-table .n.win{
color:var(--ok1);
font-weight:var(--fw3);
}
.cmp{
display:inline-flex;
vertical-align:-3px;
margin-right:var(--sp2);
}
.cmp svg{
width:18px;
height:18px;
}
.cmp.pass{
color:var(--ok1);
}
.cmp.fail{
color:var(--ac1);
}
.cmp.na{
color:var(--tx3);
}
.cmp-table .v{
font-family:var(--ff2);
font-size:15px;
color:var(--tx2);
}
.chips{
display:inline-flex;
gap:var(--sp1);
}
.chip-s{
width:24px;
height:24px;
border-radius:var(--br1);
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.15);
}
.status-head{
display:flex;
align-items:center;
gap:var(--sp4);
}
.dot-s{
width:18px;
height:18px;
border-radius:var(--br9);
background:var(--ok1);
flex:none;
}
.status-head.busy .dot-s{
background:var(--wn1);
}
.status-head.degraded .dot-s{
background:var(--ac1);
}
.prose-wide{
padding-top:var(--sp7);
}
.prose-wide h1{
font-size:var(--fz6);
font-weight:var(--fw4);
font-stretch:106%;
letter-spacing:var(--ls1);
line-height:0.98;
margin-bottom:var(--sp4);
}
.prose-wide .lead{
margin:0 0 var(--sp6);
}
.prose-wide .dl{
font-size:var(--fz2);
}
.docs pre{
background:var(--bg2);
border-radius:var(--br2);
padding:var(--sp4) var(--sp5);
overflow-x:auto;
font-family:var(--ff2);
font-size:15px;
line-height:1.6;
color:var(--tx1);
margin-bottom:var(--sp4);
white-space:pre;
}
.docs pre code{
background:none;
padding:0;
font-size:inherit;
}
.docs table{
width:100%;
border-collapse:collapse;
margin-bottom:var(--sp5);
font-size:var(--fz1);
}
.docs th{
font-family:var(--ff2);
font-weight:var(--fw1);
font-size:15px;
color:var(--tx2);
text-align:left;
padding:var(--sp2) var(--sp3) var(--sp2) 0;
border-bottom:1px solid var(--bg4);
}
.docs td{
padding:var(--sp2) var(--sp3) var(--sp2) 0;
border-bottom:1px solid var(--bg3);
color:var(--tx2);
vertical-align:top;
}
.docs td:first-child{
color:var(--tx1);
white-space:nowrap;
}
@media (max-width:640px){
.docs table:not(.stack){
display:block;
max-width:100%;
overflow-x:auto;
}
.docs table.stack thead{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
}
.docs table.stack,.docs .stack tbody,.docs .stack tr,.docs .stack td{
display:block;
}
.docs .stack tr{
padding:var(--sp3) 0;
border-bottom:1px solid var(--bg4);
}
.docs .stack td{
padding:var(--sp1) 0;
border:0;
white-space:normal;
}
.docs .stack td:first-child{
font-weight:var(--fw3);
}
.docs .stack td:last-child::before{
content:attr(data-label) ": ";
color:var(--tx3);
}
}
.docs h3{
font-size:var(--fz2);
font-weight:var(--fw3);
margin:var(--sp6) 0 var(--sp2);
}
.changelog h2{
font-family:var(--ff2);
font-size:var(--fz1);
font-weight:var(--fw1);
color:var(--ac1);
letter-spacing:0;
}
.site-foot .fine{
max-width:72ch;
margin:0 auto;
color:var(--tx3);
}
.site-foot .fine+.fine{
margin-top:var(--sp2);
}
.down{
width:18px;
height:18px;
flex:none;
}
.button:hover .down{
transform:translateY(2px);
}
.page{
padding:var(--sp8) 0 var(--sp9);
}
.prose{
max-width:var(--pw2);
margin-inline:auto;
}
.prose h1{
font-size:var(--fz6);
font-weight:var(--fw4);
font-stretch:106%;
letter-spacing:var(--ls1);
line-height:0.98;
margin-bottom:var(--sp6);
}
.prose h2{
font-size:var(--fz4);
font-weight:var(--fw3);
letter-spacing:var(--ls3);
margin:var(--sp7) 0 var(--sp3);
}
.prose p,.prose ul,.prose ol{
color:var(--tx2);
margin-bottom:var(--sp4);
}
.prose li{
margin-bottom:var(--sp2);
}
.prose a:not(.button),.fine-note a,.steal-note a,.notice a{
color:var(--ac1);
font-weight:var(--fw2);
}
.prose a .down{
display:inline-block;
width:1em;
height:1em;
margin-left:2px;
vertical-align:-0.15em;
}
.prose .updated{
font-family:var(--ff2);
font-size:15px;
color:var(--tx3);
}
.form{
display:grid;
gap:var(--sp5);
margin:var(--sp6) 0 var(--sp7);
}
.form-row{
grid-template-columns:1fr auto;
align-items:end;
margin-bottom:var(--sp5);
}
.form .form-error{
grid-column:1/-1;
margin:0;
}
.form .form-error:empty{
display:none;
}
.form>.button{
justify-self:start;
}
.form-row>.button{
min-height:56px;
}
.field{
display:grid;
gap:var(--sp2);
min-width:0;
}
.field label{
font-family:var(--ff2);
font-size:15px;
color:var(--tx2);
}
.field .opt{
color:var(--tx3);
}
.field input,.field select,.field textarea{
width:100%;
min-height:56px;
padding:0 var(--sp5);
border:0;
border-radius:var(--br2);
background:var(--bg3);
color:var(--tx1);
font-family:var(--ff2);
font-size:var(--fz1);
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.08);
}
.field select{
appearance:none;
padding-right:var(--sp8);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a8a59e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right var(--sp5) center;
background-size:20px;
cursor:pointer;
}
.field textarea{
min-height:200px;
padding:var(--sp4) var(--sp5);
line-height:var(--lh3);
resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;
background-color:var(--bg4);
box-shadow:inset 0 0 0 2px var(--ac1);
}
.field input::placeholder,.field textarea::placeholder{
color:var(--tx3);
opacity:1;
}
.prose .field-note{
margin:0;
font-size:15px;
color:var(--tx3);
}
.hp{
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden;
}
.notice{
margin:0 0 var(--sp7);
padding:var(--sp2) 0 var(--sp2) var(--sp5);
border-left:3px solid var(--ok1);
}
.notice.warn{
border-left-color:var(--wn1);
}
.prose .notice h2{
margin:0 0 var(--sp2);
}
.prose .notice p:last-child{
margin-bottom:0;
}
@media (max-width:640px){
.form-row{
grid-template-columns:1fr;
}
.form-row>.button,.form>.button{
justify-self:stretch;
}
}
.prose strong,.prose code{
color:var(--tx1);
}
.prose code{
font-family:var(--ff2);
font-size:0.92em;
background:var(--bg3);
border-radius:var(--br1);
padding:0.1em 0.35em;
}
.result-head{
padding-top:var(--sp7);
padding-bottom:var(--sp7);
}
.result-head .glance{
margin:var(--sp5) 0 0;
color:var(--tx1);
}
.again{
padding-bottom:0;
}
.result-head h1{
font-size:clamp(40px,6vw,84px);
font-weight:var(--fw4);
font-stretch:108%;
letter-spacing:var(--ls1);
line-height:0.92;
overflow-wrap:anywhere;
}
.result-meta{
margin-top:var(--sp4);
display:flex;
flex-wrap:wrap;
gap:var(--sp2) var(--sp5);
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.result-meta a{
color:var(--tx2);
}
.actions{
display:flex;
flex-wrap:wrap;
gap:var(--sp2);
margin-top:var(--sp6);
align-items:center;
}
.actions form{
display:contents;
}
.actions .button-ghost{
min-height:40px;
padding:0 var(--sp4);
font-size:var(--fz1);
font-weight:var(--fw2);
}
.notes{
list-style:none;
padding:0;
display:grid;
gap:var(--sp2);
margin-bottom:var(--sp6);
}
.notes li{
background:rgba(255,181,71,0.08);
color:var(--tx1);
border-radius:var(--br2);
padding:var(--sp3) var(--sp4);
font-size:var(--fz1);
}
.notes li::before{
content:"Note ";
font-family:var(--ff2);
color:var(--wn1);
}
details.more summary{
cursor:pointer;
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
min-height:44px;
display:flex;
align-items:center;
}
details.more summary:hover{
color:var(--tx1);
}
.waiting{
padding-top:var(--sp8);
padding-bottom:var(--sp9);
}
.waiting h1{
font-size:clamp(40px,7vw,104px);
font-weight:var(--fw4);
font-stretch:108%;
letter-spacing:var(--ls1);
line-height:0.92;
overflow-wrap:anywhere;
}
.progress{
list-style:none;
padding:0;
margin-top:var(--sp7);
display:grid;
gap:var(--sp3);
font-family:var(--ff2);
font-size:var(--fz2);
color:var(--tx3);
max-width:640px;
}
.progress li{
display:flex;
gap:var(--sp3);
align-items:center;
transition:color var(--tr2);
}
.progress li::before{
content:"";
width:10px;
height:10px;
border-radius:var(--br9);
background:var(--bg5);
flex:none;
transition:background var(--tr2);
}
.progress li.on{
color:var(--tx1);
}
.progress li.on::before{
background:var(--ac1);
animation:pulse 1s ease-in-out infinite alternate;
}
.progress li.done{
color:var(--tx2);
}
.progress li.done::before{
background:var(--tx2);
animation:none;
}
@keyframes pulse{
from{
opacity:1;
}
to{
opacity:0.35;
}
}
.status{
margin-top:var(--sp6);
font-family:var(--ff2);
font-size:var(--fz1);
color:var(--tx2);
}
.oops{
padding-top:var(--sp8);
padding-bottom:var(--sp9);
}
.oops .headline{
font-size:var(--fz6);
max-width:18ch;
}
.oops p.lead{
max-width:52ch;
}
.big404{
display:block;
height:clamp(86px,17vw,230px);
width:auto;
margin-bottom:var(--sp6);
}
@media (max-width:1000px){
.foot-cols{
grid-template-columns:repeat(2,minmax(0,240px));
}
.nav{
gap:var(--sp4);
}
.nav .wide{
display:none;
}
.steps{
grid-template-columns:1fr;
}
.steps .n{
padding-bottom:var(--sp5);
}
}
@media (max-width:800px){
.block{
grid-template-columns:minmax(0,1fr);
}
.scores{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.compare-form{
flex-direction:column;
align-items:stretch;
}
.compare-form .vs{
padding:0;
text-align:center;
}
.check{
grid-template-columns:22px minmax(0,1fr);
}
.ck-value{
grid-column:2;
text-align:left;
}
.weights li,.weights li:has(> :nth-child(2):last-child){
grid-template-columns:96px minmax(0,1fr);
}
.weights .w-note{
grid-column:2;
}
.site-head .wrap{
grid-template-columns:1fr auto;
}
.nav{
display:none;
}
}
@media (max-width:700px){
.mark{
font-size:24px;
}
.mark:hover .mark-c,.mark:focus-visible .mark-c{
max-width:0;
opacity:0;
margin-left:0;
}
.steal-box,.steal-box:focus-within{
flex-wrap:wrap;
padding:0;
background:transparent;
box-shadow:none;
}
.steal-box .scheme{
display:none;
}
.steal-box input{
padding:0 var(--sp5);
flex-basis:100%;
height:56px;
background:var(--bg3);
border-radius:var(--br9);
box-shadow:inset 0 0 0 1px rgba(243,241,236,0.08);
}
.steal-box input:focus{
background:var(--bg4);
box-shadow:inset 0 0 0 2px var(--ac1);
}
.steal-box .button{
width:100%;
}
.roles{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.chip{
height:64px;
}
.font .aa{
font-size:40px;
}
.foot-cols{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--sp6) var(--sp5);
}
.bars li{
grid-template-columns:56px minmax(0,1fr);
}
.scale li{
grid-template-columns:minmax(0,1fr);
gap:var(--sp1);
}
.code pre{
font-size:15px;
padding:var(--sp4);
}
.section{
padding:var(--sp8) 0;
}
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}
*,*::before,*::after{
animation-duration:1ms !important;
animation-delay:0ms !important;
animation-iteration-count:1 !important;
transition-duration:1ms !important;
}
}
@media (forced-colors:active){
.chip,.dot-c,.bar,.shape,.shadow-box{
forced-color-adjust:none;
}
.button,.tab,.small-button,.steal-box{
border:1px solid ButtonText;
}
}