:root{
    --navy:#012B50; --bright:#1883C2; --mid:#2FA7E0; --light:#6CC4E9;
    --pale:#EAF4FB; --paler:#F5FAFE; --text:#24313F; --gray:#5B6B7A;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:'Carlito',Calibri,sans-serif; color:var(--text);
    background:linear-gradient(180deg,var(--paler) 0%,var(--pale) 100%);
    display:flex; flex-direction:column; min-height:100vh;
  }

  header{
    background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; height:64px; flex:0 0 auto;
    box-shadow:0 2px 12px rgba(1,43,80,.25); position:relative; z-index:5;
  }
  .brand{display:flex; align-items:baseline; gap:14px; min-width:0; overflow:hidden}
  .brand .title{font-weight:700; font-size:16px; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .brand .sub{font-size:14px; color:var(--light); letter-spacing:.04em; white-space:nowrap}
  .buy{
    background:var(--bright); color:#fff; text-decoration:none;
    font-weight:700; font-size:15px; letter-spacing:.03em;
    padding:10px 22px; border-radius:999px; white-space:nowrap;
    transition:background .2s ease, transform .15s ease;
  }
  .buy:hover{background:var(--mid); transform:translateY(-1px)}

  main{
    flex:1 1 auto; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:24px 16px 8px; gap:16px;
  }

  .book-wrap{
    width:100%;
    display:flex; align-items:center; justify-content:center; gap:14px;
  }
  /* two-page spread on desktop; capped by viewport height so the book always fits */
  .book-stage{
    width:min(1240px, 92vw, calc((100dvh - 215px) * 1.414));
    aspect-ratio: 1240 / 877;
    box-shadow:0 8px 26px rgba(1,43,80,.10);
  }
  #book img{width:100% !important; height:100% !important; object-fit:cover; display:block; border:0}
  /* let the empty half (next to the single cover) blend into the page background */
  #book canvas, .stf__canvas, .stf__wrapper{background:transparent !important}
  .stf__parent{background:transparent !important}

  .nav{
    flex:0 0 auto; width:46px; height:46px; border-radius:50%;
    border:1.5px solid var(--light); background:#fff; color:var(--navy);
    font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .18s ease;
  }
  .nav:hover:not(:disabled){background:var(--navy); color:#fff; border-color:var(--navy)}
  .nav:disabled{opacity:.25; cursor:default}

  .status{
    display:flex; align-items:center; gap:16px;
    color:var(--gray); font-size:15px; letter-spacing:.03em;
  }
  .status .badge{
    background:#fff; border:1px solid var(--light); border-radius:999px;
    padding:5px 16px; font-weight:700; color:var(--navy);
  }
  .zoomhint{color:var(--gray); font-size:13.5px}

  footer{
    flex:0 0 auto; text-align:center; padding:12px 16px 18px;
    color:var(--gray); font-size:14px;
  }
  footer b{color:var(--navy)}

  .loader{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:var(--paler); z-index:20; transition:opacity .4s ease;
    color:var(--navy); font-size:17px; letter-spacing:.06em;
  }
  .loader.hidden{opacity:0; pointer-events:none}

  /* fullscreen zoom overlay for low-vision reading */
  .zoom{
    position:fixed; inset:0; z-index:30; display:none;
    background:rgba(1,43,80,.92);
    overflow-y:auto; padding:32px 16px 64px;
  }
  .zoom.open{display:block}
  .zoom-inner{
    display:flex; gap:18px; justify-content:center; align-items:flex-start;
    margin:0 auto; max-width:1500px;
  }
  .zoom-inner img{
    width:min(720px, 46vw); height:auto; display:block;
    box-shadow:0 6px 30px rgba(0,0,0,.35); background:#fff;
  }
  .zoom-inner img:only-child{width:min(820px, 92vw)}
  .zoom-close{
    position:fixed; top:18px; right:22px; z-index:31;
    background:#fff; color:var(--navy); border:none; border-radius:999px;
    font:700 15px 'Carlito',sans-serif; padding:10px 20px; cursor:pointer;
    display:none;
  }
  .zoom.open ~ .zoom-close, .zoom-close.show{display:block}

  @media (max-width:900px){
    .brand .sub{display:none}
    .brand .title{font-size:13.5px; letter-spacing:.03em}
  }
  @media (max-width:760px){
    header{padding:0 16px; height:58px}
    .buy{font-size:13px; padding:8px 16px}
    .nav{width:38px; height:38px; font-size:17px}
    main{padding:18px 8px 6px; gap:12px}
    /* single page on phones */
    .book-stage{
      width:min(620px, 88vw, calc((100dvh - 200px) * 0.707));
      aspect-ratio: 620 / 877;
    }
    .zoom-inner{flex-direction:column; align-items:center}
    .zoom-inner img{width:min(94vw, 720px)}
    .status{flex-wrap:wrap; justify-content:center; text-align:center}
  }

  :focus-visible{outline:3px solid #1883C2;outline-offset:4px}
  .reader-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
  .zoom-button{font:inherit;padding:8px 14px;border:1px solid var(--navy);border-radius:5px;color:var(--navy);background:white;cursor:pointer}
  .fallback{max-width:900px;margin:auto;padding:24px}
  .fallback img{display:block;width:100%;height:auto;margin:18px auto}
  .fallback summary{cursor:pointer;padding:12px}
  .buy{background:#12699c}.buy:hover{background:#0e547d}
  @media(max-width:760px){.book-stage{width:min(620px,calc(100vw - 112px),calc((100dvh - 250px) * .707))}.book-wrap{gap:8px}.brand .title{white-space:normal;font-size:11px}.brand{padding-right:10px}header{min-height:64px;height:auto;padding-top:8px;padding-bottom:8px}}
  @media(prefers-reduced-motion:reduce){*{transition:none!important}}