.frame:has(.pub-screen) { aspect-ratio:auto; background:#fbfaf6 }
.frame:has(.pub-screen)::before { display:none }
.frame:has(.pub-screen) #content { display:block; height:auto }
.frame:fullscreen:has(.pub-screen), #expanded-view .frame:has(.pub-screen) { overflow-y:auto }
.pub-screen { padding:clamp(15px,2.4cqw,38px); font:16px/1.5 PanoManrope,"Segoe UI",sans-serif }
.pub-screen [hidden] { display:none }
.pub-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); padding:0 }
.frame .pub-sheet, .frame .pub-example img, .frame .pub-thumbs img { width:100%; height:auto }
.pub-overview { position:relative }
.pub-hotspots { position:absolute; inset:46.9% 2.45% 23.9%; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.45% }
.pub-hotspots button { border:0; background:transparent; border-radius:3px; cursor:zoom-in }
.pub-hotspots button:hover, .pub-hotspots button:focus-visible { outline:3px solid #607539; outline-offset:1px }
.pub-launch, .pub-controls button {
  line-height:1.3; font-family:inherit; font-size:15px; font-weight:600;
  color:#fff; background:#233e2e; border:0; border-radius:9px; min-height:44px; padding:9px 15px; cursor:pointer;
}
.pub-launch { display:flex; align-items:center; gap:18px; margin:14px 0 0 }
.pub-mobile-gallery { display:none }
.pub-viewer {
  width:fit-content; max-width:calc(100vw - 16px); max-height:96dvh; padding:10px; border:0;
  background:#f8f5ec; color:#243728; border-radius:14px;
}
.pub-viewer::backdrop { background:rgb(16 25 18 / .88) }
.pub-controls { display:flex; gap:6px; align-items:center; margin-bottom:8px }
.pub-controls output { text-align:center; min-width:44px; font-variant-numeric:tabular-nums }
.pub-controls .pub-close { margin-left:auto }
.frame .pub-viewer img { width:auto; height:auto; max-height:calc(96dvh - 74px); max-width:100%; margin:auto }
@container (width > 900px) {
  .pub-reading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
}
@container (max-width:900px) {
  .pub-screen .pub-sheet, .pub-overview { display:none }
  .pub-lead, .pub-example { border-radius:14px; padding:clamp(16px,4cqw,32px); background:#f2edde }
  .pub-lead span { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
  .pub-lead h2 { margin:12px 0; font:600 clamp(26px,5cqw,42px)/1.1 Georgia,serif; color:inherit }
  .pub-lead p:last-child, .pub-example p:last-child { margin-bottom:0 }
  .pub-dark { color:#fcf6e1; background:#293221 }
  .pub-example { margin-top:12px }
  .pub-example h3 { margin:0 0 14px; font-size:21px }
  .frame .pub-example img { max-width:450px; margin:auto; border-radius:9px }
  .pub-mobile-gallery { display:block }
  .pub-thumbs { margin-top:14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
  .pub-thumbs button { border:0; border-radius:7px; overflow:hidden; padding:0; cursor:zoom-in; background:#f2edde }
  .pub-mobile-gallery p { padding:14px; border-radius:12px; background:#e5e8ce }
}
@container (max-width:540px) {
  .pub-thumbs { grid-template-columns:repeat(2,minmax(0,1fr)) }
}