*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Inter,sans-serif;
background:#fff;
color:#202124;

}

.topbar{

height:60px;
border-bottom:1px solid #ececec;

display:flex;
align-items:center;

padding:0 26px;

}

.repo{

display:flex;
align-items:center;
gap:14px;

font-weight:600;
color:#444;

}

.github{

width:26px;
height:26px;

}

main{

display:flex;
justify-content:center;
align-items:center;

height:calc(100vh - 60px);

}

.wrapper{

text-align:center;

}

.book{

width:62px;
height:62px;

margin:auto;

display:flex;
justify-content:center;
align-items:center;

color:#000;

}

.book svg{

width:60px;

}

h1{

margin-top:18px;

font-size:24px;
font-weight:600;

}

.subtitle{

margin-top:12px;

color:#888;
font-size:18px;

}

.subtitle span{

color:#6b7c91;

}

.card{

margin-top:46px;

max-width:560px;

border:1px solid #e7e7e7;

border-radius:18px;

padding:30px;

box-shadow:
0 10px 24px rgba(0,0,0,.06);
margin:40px auto;

}

.card-head{

display:flex;
justify-content:space-between;
align-items:center;

}

.access{

display:flex;
align-items:center;
gap:10px;

padding:11px 18px;

background:#fafafa;

border:1px solid #e4e4e4;

border-radius:10px;

font-weight:600;

}

.badge{

background:#eaf9ee;

color:#2ea24b;

padding:8px 16px;

font-size:13px;

border-radius:30px;

font-weight:600;

}

.info{

margin-top:28px;

border:1px solid #e5e5e5;

border-radius:12px;

padding:24px;

text-align:left;

}

.line{

display:flex;
align-items:center;

gap:12px;

font-size:18px;

color:#4f5b68;

}

.line+.line{

margin-top:20px;

}

button{

margin-top:28px;

width:100%;

height:64px;

background:#279548;

border:none;

border-radius:8px;

font-size:23px;

font-weight:600;

color:#fff;

cursor:pointer;

transition:.25s;

}

button:hover{

background:#21803d;

}

.bottom{

display:flex;
justify-content:center;
gap:18px;

margin-top:24px;

}

.small{

padding:10px 16px;

border:1px solid #e5e5e5;

border-radius:8px;

font-size:14px;

color:#7a7a7a;

background:#fff;

}