p,aside,h1,h2,h3,li{margin-block:0 var(--igp-lead,1.15em)}
html,body{margin:0}
*{box-sizing:border-box}

:root{
--igp-lead:1.15em;
--igp-bg:#444f42;
--igp-ink:#dfe6dd;
--igp-accent:#4fcfc4;
--igp-accent2:#efe3c2;
--igp-surface:#525e4e;
--igp-column:34rem;
--igp-margin:16rem;
--igp-gutter:3.1rem;
}

@property --igp-fl{syntax:"<color>";inherits:true;initial-value:#dfe6dd}

html{-webkit-text-size-adjust:100%}

body{
background:var(--igp-bg);
color:var(--igp-ink);
font-family:"Bodoni Moda",Didot,"Times New Roman",serif;
font-weight:400;
font-size:1.05rem;
line-height:1.66;
padding:0 1.1rem;
overflow-x:hidden;
}

main{max-width:60rem;margin:0 auto;padding:2.6rem 0 1rem}

h1{
font-weight:600;
font-size:clamp(1.85rem,7.2vw,3.1rem);
line-height:1.12;
letter-spacing:.045em;
color:var(--igp-accent2);
margin-block-end:1.4rem;
}

h2{
font-weight:600;
font-size:clamp(1.2rem,4.2vw,1.55rem);
line-height:1.28;
letter-spacing:.012em;
color:var(--igp-ink);
margin-block-end:1.3rem;
}

p{--igp-fl:var(--igp-ink);max-width:38rem;scroll-margin-top:1.6rem}
p::first-line{color:var(--igp-fl)}

section{
padding-block-start:2.3rem;
margin-block-end:2.9rem;
border-block-start:1px solid var(--igp-surface);
}

#igp-1{border-block-start:0;padding-block-start:.6rem}

a{color:var(--igp-accent);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--igp-accent2)}
a:focus-visible{outline:2px solid var(--igp-accent);outline-offset:3px}

aside{
position:relative;
font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
font-weight:400;
font-size:.715rem;
line-height:1.62;
letter-spacing:.005em;
color:var(--igp-accent2);
max-width:30rem;
margin-inline-start:1.3rem;
padding-inline-start:.85rem;
border-inline-start:1px solid var(--igp-surface);
}

aside b{
display:inline-block;
font-weight:400;
color:var(--igp-accent);
letter-spacing:.09em;
margin-inline-end:.45em;
}

aside em{font-style:normal;color:var(--igp-ink);letter-spacing:.06em}

.igp-def{color:var(--igp-ink)}
.igp-xref{color:var(--igp-accent)}
.igp-xref a{text-decoration-thickness:1px}
.igp-caveat{
color:var(--igp-accent2);
border-inline-start-color:var(--igp-accent);
padding-block:.55rem;
}

form{margin-block-end:var(--igp-lead);overflow-x:auto}

table{
border-collapse:collapse;
width:100%;
min-width:27rem;
font-size:.9rem;
font-variant-numeric:tabular-nums;
}

caption{
text-align:left;
font-style:italic;
font-size:.84rem;
color:var(--igp-accent2);
padding-block-end:.6rem;
}

th,td{
padding:.42rem .5rem;
border-block-end:1px solid var(--igp-surface);
text-align:right;
vertical-align:baseline;
}

thead th{
font-weight:600;
font-size:.78rem;
letter-spacing:.05em;
color:var(--igp-accent2);
border-block-end-width:2px;
}

tbody th,tfoot th{text-align:left;font-weight:400}
tfoot th,tfoot td{color:var(--igp-accent2);font-weight:600;border-block-end:0}
tfoot tr>*{border-block-start:2px solid var(--igp-surface)}

input[type=number]{
width:4.1rem;
padding:.22rem .35rem;
font-family:inherit;
font-size:.92rem;
color:var(--igp-ink);
background:var(--igp-surface);
border:1px solid var(--igp-surface);
border-block-end-color:var(--igp-accent2);
border-radius:0;
text-align:right;
}

input[type=number]:focus{outline:2px solid var(--igp-accent);outline-offset:1px;border-block-end-color:var(--igp-accent)}

footer{
max-width:60rem;
margin:0 auto;
padding:1.7rem 0 3rem;
border-block-start:1px solid var(--igp-surface);
font-size:.82rem;
line-height:1.75;
color:var(--igp-ink);
}

footer p{margin-block-end:.15em;max-width:none}
footer p:first-child{color:var(--igp-accent2);letter-spacing:.03em}
footer p:last-child{margin-block-start:.9em}

@keyframes igp-first{
0%{--igp-fl:var(--igp-accent)}
97%{--igp-fl:var(--igp-accent)}
100%{--igp-fl:var(--igp-ink)}
}

p:target{animation:igp-first 1.4s linear 1 both}

@media (min-width:62rem){
section{
display:grid;
grid-template-columns:minmax(0,var(--igp-column)) var(--igp-margin);
column-gap:var(--igp-gutter);
align-items:start;
}
section>*{grid-column:1}
section>aside{
grid-column:2;
margin-inline-start:0;
padding-inline-start:0;
border-inline-start:0;
margin-block-end:0;
}
.igp-caveat{border-block-start:1px solid var(--igp-accent);padding-block-start:.5rem}
section>aside::before{
content:"";
position:absolute;
top:.78em;
right:100%;
width:0;
height:1px;
background:var(--igp-accent);
transition:width 300ms linear;
}
p:target+aside::before{width:var(--igp-gutter)}
#igp-7{--igp-column:40rem;--igp-margin:14rem;--igp-gutter:2.2rem}
h1{grid-column:1}
}

@media (min-width:62rem) and (prefers-reduced-motion:reduce){
section>aside::before{width:var(--igp-gutter);transition:none}
}

@media (prefers-reduced-motion:reduce){
p:target{animation:none}
}