body.html-reader-open{overflow:hidden}
.html-reader-overlay{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  padding:clamp(16px,2.8vw,34px);
  background:rgba(0,0,0,.76);
}
.html-reader-overlay.is-active{display:block}
.html-reader-backdrop{position:absolute;inset:0}
.html-reader-shell{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border:1px solid rgba(224,174,99,.30);
  border-radius:8px;
  background:#f7f3e9;
  box-shadow:0 22px 60px rgba(0,0,0,.48);
}
.html-reader-toolbar{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 12px 8px 18px;
  border-bottom:1px solid rgba(43,31,18,.18);
  background:#111b21;
  color:#f4ead9;
}
.html-reader-toolbar h1{
  min-width:0;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:Georgia,"STSong","Songti SC",serif;
  font-size:16px;
  font-weight:400;
}
.html-reader-close{
  appearance:none;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.html-reader-close:hover,.html-reader-close:focus-visible{background:rgba(255,255,255,.18);outline:none}
.html-reader-frame{width:100%;height:100%;border:0;background:#fff}

/* V117: reader loading feedback and smoother iframe reveal */
.html-reader-shell{isolation:isolate}
.html-reader-loading{
  position:absolute;
  z-index:3;
  inset:48px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#f7f3e9;
  color:#3d3328;
  font:500 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  transition:opacity .16s ease,visibility .16s ease;
}
.html-reader-loading.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.html-reader-spinner{
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(61,51,40,.20);
  border-top-color:rgba(61,51,40,.78);
  animation:htmlReaderSpin .72s linear infinite;
}
@keyframes htmlReaderSpin{to{transform:rotate(360deg)}}
.html-reader-frame{opacity:0;transition:opacity .16s ease;contain:layout paint}
.html-reader-frame.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){
  .html-reader-spinner{animation:none}
  .html-reader-loading,.html-reader-frame{transition:none}
}