body {
    font-family: "Noto Serif SC", serif;
    background-image: url("https://www.transparenttextures.com/patterns/rice-paper.png");
    background-color: #f6f4ee;
    margin: 0;
    color: #222;
    line-height: 1.9;
    overflow: hidden;
}
.scroll {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}
.roll-container {
    width: 80%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #f6f4ee;
}
.roll-content {
    transform-origin: top center;
    opacity: 0;
    transform: translateY(-40px) rotateX(90deg);
    animation: rollIn 3s forwards;
}
.title {
    text-align: center;
    padding: 120px 20px;
    animation: fadein 3s ease;
}
.title h1 {
    font-family:'Zhi Mang Xing',cursive;
    font-size:72px;
    letter-spacing:6px;
    margin:0;
}
.subtitle {
    margin-top: 15px;
    color: #555;
    font-size: 22px;
    line-height: 1.6;
}
.catalog {
    max-width: 720px;
    margin: auto;
    padding: 40px;
}
.volume {
    padding: 35px 0;
    border-bottom: 1px solid #ddd;
}
.volume a {
    text-decoration: none;
    color: #222;
}
.volume h2 {
    font-size: 30px;
    margin-bottom: 8px;
}
.volume p {
    color: #666;
}
@keyframes rollIn {
    0% {opacity:0; transform:translateY(-40px) rotateX(90deg);}
    100% {opacity:1; transform:translateY(0) rotateX(0);}
}
@keyframes fadein {
    from {opacity: 0; transform: translateY(40px);}
    to {opacity: 1; transform: translateY(0);}
}
footer {
    text-align:center;
    padding:60px;
    color:#888;
}
.poetry {
    text-align:center;
    font-size:22px;
    letter-spacing:2px;
    line-height:2.2;
    margin:80px auto;
    max-width:600px;
}