/* Image dimensions stay reserved by their existing width, height and aspect ratio. */
.room-frame img,.guide-image img,.reading-card-image img,.article-illustration img,.article-hero img,.about-image img{background-color:#e8ecdf}
img[data-image-pending]{background:#e8ecdf;background-image:linear-gradient(100deg,#e8ecdf 20%,#f3f5eccc 45%,#e8ecdf 70%);background-size:220% 100%}
img[data-image-pending][data-image-shimmer]{animation:image-shimmer 1.8s ease-in-out infinite}
@keyframes image-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
html[data-mobile-hidden] img[data-image-pending]{animation-play-state:paused}
html[data-pull-enabled],html[data-pull-enabled] body{overscroll-behavior-y:none}
.pull-refresh{position:fixed;z-index:65;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;min-height:44px;max-width:calc(100% - 32px);padding:10px 17px;border:1px solid #9eb18a;border-radius:30px;background:#fffef9f5;color:var(--green);box-shadow:0 5px 18px #294b391c;font:600 13px/1.5 var(--sans);pointer-events:none;white-space:nowrap}
.pull-refresh-icon{font:22px/1 Arial;transform:rotate(calc(var(--pull-progress,0) * 180deg));transition:color 150ms}
.pull-refresh[data-pull-ready]{background:#e4edcf;border-color:#73925a}.pull-refresh[data-pull-busy] .pull-refresh-icon{animation:refresh-spin 1.2s linear infinite}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
.mobile-notice{position:fixed;z-index:70;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:12px 15px;border-radius:10px;border:1px solid #586e4c;background:#294b39;color:#fffef9;box-shadow:0 8px 25px #23382b30;font-size:13px;line-height:1.7;pointer-events:none;overflow-wrap:anywhere}
.mobile-notice:empty{padding:0;border:0;box-shadow:none}
.reading-feedback:not(:empty),.mobile-notice:not(:empty){animation:mobile-notice-enter 180ms ease-out}
@keyframes mobile-notice-enter{from{opacity:.6}to{opacity:1}}
html[data-motion=reduced] img[data-image-pending],html[data-motion=reduced] .pull-refresh-icon{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){img[data-image-pending],.pull-refresh-icon{animation:none!important;transform:none!important}}
@media print{img[data-image-pending]{animation:none!important;background:none}.pull-refresh,.mobile-notice{display:none!important}}