/* Кнопка чтения на карточке сказки. */
.detail-btn-read{display:flex!important;align-items:center;justify-content:center;gap:7px;padding:.625rem 1rem!important;background:#7252c9!important;color:#fff!important;white-space:nowrap}
.detail-btn-read svg{width:19px;height:19px;flex:none}
.detail-btn:has(.detail-btn-read){grid-template-columns:repeat(auto-fit,minmax(48px,auto))}
.desktop-shell .detail-btn:has(.detail-btn-read){grid-template-columns:minmax(95px,1fr) minmax(110px,1.5fr) repeat(3,44px)}

/* Плавающий прогресс при прокрутке. */
.story-reader-progress{position:sticky;top:0;z-index:100;height:0;max-width:820px;margin:0 auto;overflow:visible;visibility:hidden;pointer-events:none}
.story-reader-progress.is-visible{visibility:visible;pointer-events:auto}
.story-reader-progress-surface{position:absolute;top:0;left:0;right:0;min-height:48px;overflow:hidden;border:1px solid rgba(229,216,255,.26);border-radius:24px;background:rgba(39,31,67,.76);box-shadow:0 8px 25px rgba(9,5,27,.34),inset 0 1px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.story-reader-progress-inner{position:relative;z-index:1;display:flex;align-items:center;min-height:48px;padding:4px 5px 4px 16px;gap:10px}
.story-reader-progress-info{flex:1;min-width:0;line-height:1.15}
.story-reader-progress-title{overflow:hidden;color:#fff;font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.story-reader-progress-label{margin-top:3px;color:#ded1ed;font-size:12px;font-weight:600}
.story-reader-track{position:absolute;inset:0;background:transparent}
.story-reader-fill{display:block;width:0;height:100%;background:rgba(113,96,181,.72);transition:width .12s linear}
.story-reader-up{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:8px;border:1px solid rgba(241,233,255,.3);border-radius:50%;background:rgba(98,78,145,.48);color:#fff;cursor:pointer}
.story-reader-up svg{width:20px;height:20px}

/* Шапка сказки. */
.story-reader-heading{display:grid;grid-template-columns:minmax(140px,180px) minmax(0,1fr);align-items:center;column-gap:28px;row-gap:18px;margin:0 auto 32px;padding:20px clamp(18px,4vw,40px) 32px}
.story-reader-cover{aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#211a3e center/cover no-repeat;box-shadow:0 12px 26px rgba(13,7,32,.24)}
.story-reader-cover img{display:block;width:100%;height:100%;object-fit:cover}
.story-reader-intro{min-width:0}
.story-reader-eyebrow{margin:0 0 8px;color:#e9ba7b;font-size:11px;font-weight:800;letter-spacing:.1em}
.story-reader-heading h1{margin:0;color:#ede9f9;font-family:Nunito,-apple-system,sans-serif;font-size:clamp(26px,3.5vw,38px);font-weight:800;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere;text-transform:none}
.story-reader-authors{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.story-reader-person{display:inline-flex;align-items:center;gap:9px;min-width:0;max-width:100%;padding:8px 12px 8px 8px;border-radius:16px;background:#332e59;color:#f3eafc;text-decoration:none;font-size:14px;text-align:left}
.story-reader-person-photo{display:block;width:40px;height:40px;flex:none;overflow:hidden;border-radius:50%;background:#493c68 center/cover no-repeat}
.story-reader-person-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.story-reader-person-label{display:block;color:#bcaed1;font-size:12px;line-height:1.3}.story-reader-person strong{display:block;margin-top:3px;overflow-wrap:anywhere}
.story-reader-person:hover{background:#ffffff12;color:#ffdbab}
.story-reader-summary{margin:10px 0 0;color:#d1c4e9;font-size:15px;line-height:1.55}
.story-reader-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;color:#d4c5e4;font-size:13px}
.story-reader-stat{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 10px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff08;color:#cbbbdc;line-height:1.25}.story-reader-stat svg{width:17px;height:17px;flex:none;color:#c6aedc}.story-reader-stat strong{margin-left:3px;color:#fff0d5}
.story-reader-actions{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0}
.story-reader-listen{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;min-width:190px;min-height:44px;padding:10px 15px;border-radius:12px;background:#6647bf;color:#fff;font:800 14px Nunito,sans-serif;text-decoration:none}
.story-reader-listen:hover{background:#7656cc;color:#fff}.story-reader-listen svg{width:19px;height:19px}
.story-reader-details{color:#ede9f9;font-size:14px;font-weight:700;text-decoration:none}
.story-reader-up:focus-visible,.story-reader-person:focus-visible,.story-reader-listen:focus-visible,.story-reader-details:focus-visible,.detail-btn-read:focus-visible{outline:3px solid #ffca8e;outline-offset:3px}

/* Текст и иллюстрации. */
.story-reader-paper{margin:0 auto;padding:20px clamp(18px,4vw,30px);border-radius:1rem;background:#332e59}
.story-reader-text{color:#f4eefb;font:19px/1.85 Nunito,-apple-system,sans-serif;overflow-wrap:anywhere}
.story-reader-text p{margin:0 0 1.35em}.story-reader-text [style]{color:inherit!important}.story-reader-text a{color:#f4c889}
.story-reader-text img{display:block;max-width:100%;height:auto;margin:1.8em auto;border-radius:10px;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.story-reader-text h2,.story-reader-text h3,.story-reader-text h4{margin:1.5em 0 .6em;color:#fff0d7;line-height:1.3}
.story-reader-text table{display:block;max-width:100%;overflow-x:auto}
.story-reader-end{text-align:center;color:#d7c1ef}.story-reader-end span{font-size:25px}.story-reader-end p{font:20px 'Pribambas Regular',Nunito,sans-serif}

@media(min-width:900px){
  .desktop-shell .story-reader-progress{top:100px}
  .desktop-shell .story-reader-heading{grid-template-columns:minmax(180px,220px) minmax(0,1fr);grid-template-rows:1fr auto;gap:18px 32px;align-items:end;margin:0 0 24px;padding:24px;border:1px solid #ffffff14;border-radius:24px;background:linear-gradient(115deg,#352c4d,#29233f)}
  .desktop-shell .story-reader-cover{grid-column:1;grid-row:1/3;width:100%;border-radius:20px}
  .desktop-shell .story-reader-intro{grid-column:2;grid-row:1;align-self:end}
  .desktop-shell .story-reader-actions{grid-column:2;grid-row:2;align-self:start}
  .desktop-shell .story-reader-heading h1{font-family:DesktopNunito,Nunito,sans-serif;font-size:36px;line-height:1.15;letter-spacing:-.6px;color:#fff0d5}
  .desktop-shell .story-reader-listen{min-height:48px}
  .desktop-shell .story-reader-paper{border:1px solid #ffffff14;border-radius:24px;background:linear-gradient(115deg,#352c4d,#29233f);padding:28px}
}
@media(max-width:899px){
  html:not([data-layout="desktop"]) .story-reader-meta{flex-direction:column;gap:3px}
  html:not([data-layout="desktop"]) .story-reader-stat{min-height:0;padding:0;border:0;border-radius:0;background:none}
  .story-reader-progress{top:calc(3rem + env(safe-area-inset-top,0px));z-index:35}
  .story-reader-progress-surface{border-radius:18px}.story-reader-progress-inner{padding-left:14px}
  .story-reader-page{padding-left:8px;padding-right:8px}
  html:not([data-layout="desktop"]) .detail-btn:has(.detail-btn-read){grid-template-columns:minmax(0,1fr) repeat(3,minmax(42px,52px))}
  html:not([data-layout="desktop"]) .detail-btn:has(.detail-btn-read) .detail-btn-play{grid-column:1/-1;order:-1}
  html:not([data-layout="desktop"]) .detail-btn:has(.detail-btn-read) .detail-btn-read{grid-column:auto;min-width:0;padding-inline:.5rem!important}
}
@media(max-width:600px){
  .story-reader-heading{grid-template-columns:100px minmax(0,1fr);align-items:start;gap:14px 16px;margin-bottom:24px;padding:0}
  .story-reader-cover{border-radius:13px}.story-reader-heading h1{font-size:23px;line-height:1.16}.story-reader-eyebrow{margin-bottom:7px;font-size:10px}
  .story-reader-person{box-sizing:border-box;width:100%;font-size:13px}.story-reader-person-photo{width:40px;height:40px}.story-reader-summary{font-size:13px;line-height:1.45}.story-reader-meta{margin-top:10px;gap:6px}.story-reader-stat{font-size:12px;padding:5px 8px}
  .story-reader-actions{grid-column:1/-1;min-width:0}.story-reader-listen{box-sizing:border-box;width:100%;min-width:0;padding:8px 12px;font-size:13px}
  .story-reader-paper{padding:1rem}.story-reader-text{font-size:18px;line-height:1.75}
}
@media(max-width:360px){.story-reader-heading{grid-template-columns:82px minmax(0,1fr);gap:12px}.story-reader-heading h1{font-size:21px}}
@media(prefers-reduced-motion:reduce){.story-reader-fill{transition:none}}