:root {
  --ch-font-size: 18px;
}

body {
      font-family: "Roboto", sans-serif;
      margin:auto;
      max-width: 800px;
      padding: 2rem 1rem 2rem 1rem;
      margin-top: 2rem;
    }

    section,mdui-divider,mdui-card,mdui-list,.mt-1 {
      margin-top:1rem;
    }
    
    .mt-2 {
      margin-top:2rem;
    }
    
    mdui-card{
      width:100%;
      padding:1rem;
    }

/* Progress line under appbar */
    #scroll-progress {
      position: fixed;
      top: 4rem; /* directly below the appbar */
      left: 0;
      height: 4px;
      width: 0%;
      background-color: rgb(var(--mdui-color-primary));
      z-index: 1001; /* above content */
      transition: width 300ms ease;
    }

    /* Appbar */
    .appbar {
      display: flex;
      justify-content: center;
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      height: 4rem;
    }
    
      .svg-icon {
    width: 16px;
    height: 16px;
    background-color:rgb(var(--mdui-color-on-surface));
    -webkit-mask: url("https://hyals.ink/assets/img/writing.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("https://hyals.ink/assets/img/writing.svg") no-repeat center;
    mask-size: contain;
    display:inline-block;
    vertical-align:middle;
  }
  mdui-top-app-bar-title{
    font-size: 1rem;
  font-weight: 700;
  }
  
  mdui-top-app-bar-title mdui-chip{
     font-size: 0.8rem;
     color:rgb(var(--mdui-color-on-secondary));
     background-color:rgb(var(--mdui-color-on-surface));
     height:auto;
     }

    /* Layout helpers */
    .grid-book {
      display: grid;
      grid-template-columns: 25% 75%;
      gap: 0;
    }

.grid-book  div:nth-child(2){
padding-left:1rem;
}
    
    .grid-2col {
      display: grid;
      grid-template-columns: 50% 50%;
      gap: 1rem;
    }
    
       .flex-2col {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      row-gap: 1rem;
      column-gap: 1rem;
    }

    .title-large {
      font-size: var(--mdui-typescale-title-large-size);
      display: block;
    }

    .title-medium {
      font-size: var(--mdui-typescale-title-medium-size);
      display: block;
    }

    .title-small {
      font-size: var(--mdui-typescale-title-small-size);
      display: block;
    }

    .character-avatar {
      border-radius: var(--mdui-shape-corner-large);
      width: 6rem;
      height: 6rem;
    }






/** reader-related styling **/


    /* Chapter container */
    #chapter-container {
      padding: 2rem 20px 0;
      font-family: Georgia, serif;
      font-size: var(--ch-font-size, 18px);
      line-height: 1.8;
      white-space: pre-wrap;
      transition: all 0.3s;
    }

#chapter-container * {
  font-size: inherit;
}

    /* Typography */
    #chapter-container h1 { font-size: 1.5em; margin: 1.5rem 0 0.8rem; font-weight: bold; text-align: center; }
    #chapter-container h2 { font-size: 1.2em; margin: 1.3rem 0 0.7rem; }
    #chapter-container h3 { font-size: 1em; margin: 1rem 0 0.5rem; }
    #chapter-container p { margin: 0; text-align: justify; text-indent: 2em; }
    #chapter-container strong { font-weight: bold; }
    #chapter-container em { font-style: italic; }

    /* Lists */
    #chapter-container ul,
    #chapter-container ol { margin: 0.6rem 0 0.6rem 2rem; }

    /* Images */
    #chapter-container img {
      max-width: 90%;
      display: block;
      margin: 1rem auto;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    #chapter-container img.character {
      max-width: 70px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 0.3rem;
      box-shadow: none;
    }

    /* Links */
    #chapter-container a { color: #0077cc; text-decoration: underline; transition: color 0.3s; }
    #chapter-container a:hover { color: #005fa3; }

    /* Blockquotes */
    #chapter-container blockquote {
      border-left: 4px solid #ccc;
      margin: 0.6rem 0;
      padding-left: 1rem;
      color: #555;
      font-style: italic;
      background: rgba(0,0,0,0.02);
      border-radius: 4px;
    }

    /* Code */
    #chapter-container pre {
      background: #f4f4f4;
      padding: 0.8rem;
      border-radius: 6px;
      overflow-x: auto;
      margin: 0.8rem 0;
    }
    #chapter-container code {
      font-family: monospace;
      background: #eee;
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
    }

    /* Character dialogue */
    .character-box { border-radius: 8px; padding: 0.7rem 1rem; margin: 1rem 0; }
    .character-box.red { background: rgba(204, 0, 100, 0.05); border: 2px solid #cc0064; }
    .character-box.blue { background: rgba(0, 119, 204, 0.05); border: 2px solid #0077cc; }
    .character-box legend { font-weight: bold; padding: 0 0.5rem; }
    .character-box.red legend { color: #cc0064; }
    .character-box.blue legend { color: #0077cc; }
    .character-box p { margin: 0.3rem 0.3rem; }