:root{
--ink:#20252e;
--muted:#5a6270;
--blue:#2447d5;
--rule:#e1e5ee;
--surface:#f5f7fc;
--content:1120px}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:24px}
body{
margin:0;
background:white;
color:var(--ink);
font-family:Inter,"Helvetica Neue",Arial,sans-serif;
font-size:17px;
line-height:1.65;
-webkit-font-smoothing:antialiased}
a{
color:var(--blue);
text-decoration:none}
a:hover{
text-decoration:underline}
a:focus-visible{
outline:3px solid #ffa600;
outline-offset:5px}
img{
display:block;
max-width:100%;
height:auto}
figure{
margin:0}
figcaption{
font-size:14px;
line-height:1.6;
color:var(--muted);
margin-top:18px}
p{
margin:0 0 18px}
.navigation,main,footer{
max-width:var(--content);
margin:auto}
.navigation{
height:84px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--rule);
font-size:14px}
.navigation>div{
display:flex;
gap:28px}
.navigation>div a{
color:var(--muted)}
.wordmark{
font-size:19px;
color:var(--ink);
font-weight:750;
letter-spacing:-.5px}
.wordmark span{
color:var(--blue)}
.hero{
text-align:center;
padding:64px 0 57px}
.eyebrow{
text-transform:uppercase;
letter-spacing:.14em;
font-size:12px;
font-weight:750;
color:var(--blue);
margin-bottom:18px}
h1{
font-size:clamp(38px,5.7vw,68px);
letter-spacing:-.055em;
line-height:1.05;
margin:0 0 18px;
font-weight:750}
.subtitle{
font-size:clamp(22px,3vw,32px);
line-height:1.32;
letter-spacing:-.025em;
color:#4b5463;
font-weight:400;
margin-bottom:28px}
.authors{
font-size:16px;
line-height:2.15;
margin-bottom:9px}
.authors span{
white-space:nowrap;
display:inline-block;
margin-left:17px}
sup{
font-size:10px;
position:relative;
top:-.15em;
margin-left:2px;
color:var(--muted)}
.affiliations{
display:flex;
gap:23px;
justify-content:center;
flex-wrap:wrap;
font-size:14px;
color:var(--muted)}
.actions{
display:flex;
gap:12px;
justify-content:center;
margin-top:27px}
.button{
display:inline-flex;
align-items:center;
gap:19px;
padding:10px 19px;
border:1px solid var(--rule);
border-radius:6px;
font-size:15px;
color:var(--ink);
font-weight:600}
.button.primary{
background:var(--blue);
color:white;
border-color:var(--blue)}
.button:hover{
text-decoration:none;
box-shadow:0 4px 12px #20252e12}
.section{
padding:58px 0;
border-top:1px solid var(--rule)}
.overview{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:65px;
align-items:center;
padding-top:44px}
.overview h2{
font-size:34px;
line-height:1.2;
max-width:400px}
.overview-copy>p:not(.eyebrow){
font-size:17px}
.takeaway{
border-left:3px solid var(--blue);
padding-left:18px;
font-weight:550;
color:#313b52;
margin-top:26px}
.hero-figure{
padding:12px 0 0}
.hero-figure figcaption{
max-width:480px}
.section-heading{
margin-bottom:22px}
.section-heading .eyebrow{
margin-bottom:10px}
h2{
font-size:32px;
letter-spacing:-.035em;
line-height:1.2;
font-weight:650;
margin:0 0 21px}
.section-intro{
max-width:850px;
color:var(--muted)}
.method figure{
margin-top:36px}
.method figcaption{
max-width:830px}
.findings{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:38px;
margin-top:35px}
.finding-index{
font-size:14px;
color:var(--blue);
font-weight:600;
display:block;
margin-bottom:15px}
h3{
font-size:20px;
letter-spacing:-.015em;
line-height:1.3;
margin:0 0 13px}
.findings p{
font-size:16px;
color:var(--muted);
margin-bottom:0}
.findings strong{
color:var(--ink);
font-weight:600}
.scope{
font-size:14px;
line-height:1.7;
color:var(--muted);
margin:34px 0 0;
padding:20px 24px;
background:var(--surface);
border-radius:4px}
.code-section{
display:grid;
grid-template-columns:1fr 1fr;
gap:65px;
align-items:start}
.code-section p{
color:var(--muted)}
.code-section ul{
padding-left:18px;
margin:24px 0;
font-size:15px}
.text-link{
font-weight:600;
font-size:15px}
.code-panel{
background:#171d2b;
border-radius:8px;
overflow:hidden;
color:#e6edf9}
.code-label{
border-bottom:1px solid #ffffff1f;
padding:13px 22px;
font-size:13px;
color:#adbdd7}
.code-panel pre{
padding:22px;
margin:0;
overflow-x:auto;
color:#e2eaff;
font-size:13px;
line-height:1.9}
.code-panel p{
font-size:13px;
line-height:1.6;
padding:0 22px 22px;
margin:0;
color:#a8b7cf}
.citation{
padding-bottom:70px}
.citation>p{
font-size:15px;
color:var(--muted)}
.citation pre{
background:var(--surface);
border:1px solid var(--rule);
border-radius:6px;
padding:23px 27px;
font-size:13px;
line-height:1.7;
overflow-x:auto;
margin:24px 0 0}
code{
font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
footer{
border-top:1px solid var(--rule);
padding:26px 0 40px;
display:flex;
justify-content:space-between;
gap:20px;
color:var(--muted);
font-size:13px}
.skip{
position:absolute;
left:16px;
top:-90px;
background:white;
padding:12px;
z-index:10}
.skip:focus{
top:10px}
@media(max-width:1200px){
.navigation,main,footer{
margin-left:40px;
margin-right:40px}
}
@media(max-width:800px){
.navigation,main,footer{
margin-left:24px;
margin-right:24px}
.hero{
padding-top:44px}
.overview{
grid-template-columns:1fr;
gap:23px}
.overview h2{
max-width:550px}
.hero-figure{
max-width:550px;
margin:auto}
.findings{
gap:25px}
.code-section{
gap:30px}
.authors br{
display:none}
.authors span{
margin-left:12px}
.code-panel pre{
font-size:12px}
.code-section{
grid-template-columns:1fr}
.section{
padding:40px 0}
footer{
flex-direction:column;
gap:8px}
}
@media(max-width:560px){
.navigation{
height:65px}
.navigation>div{
gap:17px}
.hero{
padding-bottom:35px}
.desktop-break{
display:none}
.authors{
font-size:14px;
line-height:2.1}
.authors span{
margin-left:9px}
.affiliations{
font-size:14px;
gap:5px 16px}
.eyebrow{
font-size:12px;
letter-spacing:.11em}
.actions{
gap:9px}
.button{
font-size:14px;
padding:9px 14px;
gap:12px}
h2,.overview h2{
font-size:29px}
.findings{
grid-template-columns:1fr;
gap:30px}
.finding-index{
margin-bottom:7px}
.scope{
padding:17px}
.citation pre{
font-size:13px;
padding:17px}
.method figure img{
min-width:0}
.method figure>a{
display:block;
overflow-x:auto;
padding-bottom:10px}
.method figcaption{
font-size:13px}
.code-panel pre{
font-size:12px}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
}