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

html,body{
  background:#000;
  color:#d8a028;
  font-family:Consolas,monospace;
}

body{
  min-height:100vh;
}

#main{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 20px 80px;
}

.hero{
  text-align:center;
}

#mascot{
  width:380px;
  max-width:80vw;
  height:auto;
  display:block;
  margin:0 auto 25px;
}

.title{
  font-size:54px;
  letter-spacing:8px;
  margin-bottom:12px;
}

.subtitle{
  font-size:20px;
  margin-bottom:40px;
}

.redbook-section{
  width:1200px;
  max-width:95vw;
}

.book-title{
  text-align:center;
  font-size:34px;
  letter-spacing:6px;
  margin-bottom:25px;
}

.book{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:2px solid #d8a028;
  background:#0a0702;
}

.book-page{
  min-height:700px;
  padding:24px;
}

.left-page{
  border-right:1px solid rgba(216,160,40,.4);
}

.page-label{
  margin-bottom:15px;
  opacity:.8;
}

.page-image{
  height:450px;
  border:1px dashed rgba(216,160,40,.5);
  margin-bottom:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.page-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.book-page h3{
  margin-bottom:15px;
  font-size:22px;
}

.book-page p{
  line-height:1.7;
}

.book-controls{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.book-btn{
  background:transparent;
  color:#d8a028;
  border:1px solid #d8a028;
  padding:12px 24px;
  cursor:pointer;
  font-family:Consolas,monospace;
}

.book-btn:hover{
  background:#d8a028;
  color:#000;
}

.console{
  width:1000px;
  max-width:95vw;
  margin-top:40px;
  border-top:1px dashed #d8a028;
  padding-top:20px;
}

#output{
  min-height:100px;
  margin-bottom:15px;
}

.input-line{
  display:flex;
  gap:10px;
}

#commandInput{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#d8a028;
  font-family:Consolas,monospace;
  font-size:18px;
}

@media(max-width:900px){

  .book{
    grid-template-columns:1fr;
  }

  .left-page{
    border-right:none;
    border-bottom:1px solid rgba(216,160,40,.4);
  }

  .title{
    font-size:34px;
  }

  #mascot{
    width:280px;
  }
}

.book-shell{
  perspective:1400px;
}

.book{
  position:relative;
  transform-style:preserve-3d;
  overflow:hidden;
}

.turning-page{
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  background:linear-gradient(135deg, rgba(216,160,40,.22), rgba(0,0,0,.96));
  border-left:1px solid rgba(216,160,40,.6);
  transform-origin:left center;
  opacity:0;
  pointer-events:none;
  z-index:10;
}

.book.turn-next .turning-page{
  animation:turnNext .65s ease-in-out;
}

.book.turn-prev .turning-page{
  left:0;
  right:auto;
  transform-origin:right center;
  animation:turnPrev .65s ease-in-out;
}

@keyframes turnNext{
  0%{opacity:1;transform:rotateY(0deg);}
  50%{opacity:1;box-shadow:-30px 0 40px rgba(0,0,0,.65);}
  100%{opacity:0;transform:rotateY(-170deg);}
}

@keyframes turnPrev{
  0%{opacity:1;transform:rotateY(0deg);}
  50%{opacity:1;box-shadow:30px 0 40px rgba(0,0,0,.65);}
  100%{opacity:0;transform:rotateY(170deg);}
}