:root { --accent:#ff7a00; }
    html,body {
      margin:0;
      background:#121417;
      color:#e9eef3;
      font-family:system-ui, Arial, sans-serif;
      height:100%;
    }
    header { text-align:center; padding:16px 10px 6px; }
    header h1 { margin:0; font-size:clamp(18px, 3.5vw, 28px); font-weight:800; letter-spacing:.3px; }
    .frame {
      margin: 0 auto;
      max-width: 100%;
      height: calc(100vh - 150px); /* fill screen minus header/nav */
      display:flex; align-items:center; justify-content:center;
      background:#0b0e11;
    }
    .page-wrap {
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    #pageImg {
      max-width: 100%;
      max-height: 100%;
      width:auto;
      height:auto;
      object-fit: contain; /* Always fit inside without cropping */
      background:#fff;
      border-radius:10px;
      box-shadow: inset 0 0 0 5px #fff;
    }
    .nav {
      display:flex; align-items:center; justify-content:center;
      gap:16px;
      padding:12px;
    }
    .nav button {
      background: var(--accent); color:#fff;
      border:none; border-radius:10px;
      padding:12px 18px; font-size:16px; font-weight:700; cursor:pointer;
      box-shadow: 0 5px 14px rgba(255,122,0,.35);
    }
    .nav button[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; }
    .page-num { font-weight:700; letter-spacing:.3px; }
    .hint { text-align:center; color:#9aa7b4; font-size:14px; margin:4px 0 16px; }
    .error {
      position:absolute; inset:0; display:none; align-items:center; justify-content:center;
      background:#1b1f24; color:#ffd7d7; font-weight:700; text-align:center; padding:20px; border-radius:10px;
    }
  body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#wb_Image1
{
   vertical-align: top;
}
#Image1
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image2
{
   vertical-align: top;
}
#Image2
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image3
{
   vertical-align: top;
}
#Image3
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image4
{
   vertical-align: top;
}
#Image4
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}