*,*::before,*::after{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
font-size:var(--fz1);
line-height:1.5;
-webkit-text-size-adjust:100%;
}
body{
font-family:"JetBrains Mono","monospace";
background-color:var(--bgc);
color:var(--cl1);
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:2rem;
transition:background-color 0.3s ease;
}
.theme-toggle{
position:fixed;
top:2rem;
right:2rem;
padding:8px 12px;
background:var(--container-bg);
border:1px solid var(--border-color);
color:var(--cl1);
cursor:pointer;
font-family:inherit;
font-size:14px;
transition:all 0.3s ease;
}
.theme-toggle:hover{
background:var(--border-color);
}
.container{
width:100%;
max-width:var(--pw1);
background-color:var(--container-bg);
padding:3rem;
box-shadow:0 1px 3px var(--shadow-color);
border:1px solid var(--border-color);
transition:background-color 0.3s ease,border-color 0.3s ease;
}
h1{
font-size:2.5rem;
font-weight:700 !important;
margin-bottom:0.5rem;
letter-spacing:-0.59px;
color:var(--cl1);
}
h2{
font-size:1.25rem;
color:var(--cl2);
font-weight:600;
margin-bottom:1rem;
}
h3{
font-size:1.1rem;
font-weight:600;
margin:1.5rem 0 0.75rem;
color:var(--accent-color);
}
p{
margin-bottom:1rem;
color:var(--cl2);
}
p,li{
line-height:var(--lh1);
letter-spacing:-0.59px;
font-size:var(--fz1);
}
a{
color:var(--accent-color);
text-decoration:none;
transition:opacity 0.2s ease;
}
a:hover{
opacity:0.8;
text-decoration:underline;
}
ul{
list-style-type:none;
margin-bottom:1.5rem;
}
li{
color:var(--cl2);
position:relative;
padding-left:1.5rem;
}
li::before{
content:"•";
color:var(--bullet-color);
position:absolute;
left:0;
font-size:1.5rem;
line-height:31px;
opacity:0.8;
transform:translateY(-1px);
}
.back-link{
display:inline-block;
margin-bottom:2rem;
color:var(--accent-color);
position:relative;
padding-left:1.5rem;
}
.back-link::before{
content:"<";
position:absolute;
left:0;
font-size:1.4rem;
font-weight:bold;
line-height:1;
transform:translateY(-2px);
}