/*
 * Public fiabe application shell.
 * Loaded only by the customer-facing pages below /fiabe-personalizzate/.
 * The landing keeps its own editorial layout in landing.css and /s/fiabe/ is untouched.
 */

.fiabe-app {
  --fiabe-bg: #fbf8f1;
  --fiabe-surface: #fffefd;
  --fiabe-surface-soft: #f4f1e8;
  --fiabe-ink: #302923;
  --fiabe-copy: #6f655d;
  --fiabe-coral: #ee794c;
  --fiabe-coral-dark: #c95a34;
  --fiabe-gold: #f2bd5c;
  --fiabe-night: #17484e;
  --fiabe-sage: #e8f0e8;
  --fiabe-line: rgba(66, 53, 43, .13);
  --fiabe-shadow: 0 24px 65px rgba(71, 52, 37, .1);
  min-height: 72vh;
  overflow: clip;
  background:
    radial-gradient(circle at 8% 2%, rgba(242, 189, 92, .12), transparent 25rem),
    radial-gradient(circle at 92% 8%, rgba(76, 127, 112, .1), transparent 27rem),
    var(--fiabe-bg);
  color: var(--fiabe-ink);
  font-family: "Mukta", Arial, sans-serif;
  font-size: 17px;
}

.fiabe-app::before,
.fiabe-app .fiabe-section::before,
.fiabe-app .fiabe-card::before,
.fiabe-app .fiabe-feature::before,
.fiabe-app .fiabe-balance-card::before,
.fiabe-app .fiabe-story-card::before,
.fiabe-app .fiabe-empty::before,
.fiabe-app .fiabe-pack::before,
.fiabe-app .fiabe-cover::before,
.fiabe-app .fiabe-illustration::before {
  display: none;
  content: none;
}

.fiabe-app *,
.fiabe-app *::before,
.fiabe-app *::after {
  box-sizing: border-box;
}

.fiabe-app .fiabe-container {
  width: min(1180px, calc(100% - 48px));
}

.fiabe-app .fiabe-section {
  padding: clamp(52px, 7vw, 88px) 0;
}

.fiabe-app h1,
.fiabe-app h2,
.fiabe-app h3 {
  margin-top: 0;
  color: var(--fiabe-ink);
  font-family: "Merriweather", Georgia, serif;
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: none !important;
}

.fiabe-app h1 {
  margin-bottom: 16px;
  font-size: clamp(40px, 5.1vw, 64px);
  line-height: 1.04;
}

.fiabe-app h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.12;
}

.fiabe-app h3 {
  margin-bottom: 10px;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.22;
}

.fiabe-app p {
  color: var(--fiabe-copy);
  line-height: 1.65;
}

.fiabe-app .fiabe-section__head {
  max-width: 780px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}

.fiabe-app .fiabe-section__head h1,
.fiabe-app .fiabe-section__head h2 {
  text-align: center;
}

.fiabe-app .fiabe-section__head > p:last-child {
  max-width: 680px;
  margin: 0 auto;
  color: var(--fiabe-copy);
  font-size: clamp(17px, 1.8vw, 20px);
}

.fiabe-app .fiabe-eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
  margin: 0 0 15px;
  padding: 8px 13px;
  border: 1px solid rgba(197, 126, 26, .2);
  border-radius: 999px;
  background: #fff5dd;
  color: #8a5b13;
  font-family: "Mukta", Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.fiabe-app .fiabe-card {
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--fiabe-line);
  border-radius: 28px;
  background: rgba(255, 254, 253, .96);
  box-shadow: var(--fiabe-shadow);
  backdrop-filter: none;
}

.fiabe-app .fiabe-actions,
.fiabe-app .fiabe-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  align-items: center;
}

.fiabe-app .fiabe-btn,
.fiabe-app .fiabe-control,
.fiabe-app .fiabe-examples button {
  appearance: none;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--fiabe-coral);
  box-shadow: 0 12px 28px rgba(224, 103, 62, .18);
  color: #fff;
  cursor: pointer;
  font-family: "Mukta", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.fiabe-app .fiabe-btn:hover,
.fiabe-app .fiabe-control:hover,
.fiabe-app .fiabe-examples button:hover {
  background: var(--fiabe-coral-dark);
  box-shadow: 0 15px 32px rgba(186, 73, 39, .22);
  color: #fff;
  transform: translateY(-1px);
}

.fiabe-app .fiabe-btn--soft,
.fiabe-app .fiabe-control {
  border-color: var(--fiabe-line);
  background: #fff;
  box-shadow: none;
  color: #5b4739;
}

.fiabe-app .fiabe-btn--soft:hover,
.fiabe-app .fiabe-control:hover {
  border-color: rgba(238, 121, 76, .3);
  background: #fff8f2;
  box-shadow: none;
  color: #7c3f27;
}

.fiabe-app a:focus-visible,
.fiabe-app button:focus-visible,
.fiabe-app input:focus-visible,
.fiabe-app select:focus-visible,
.fiabe-app textarea:focus-visible,
.fiabe-app label:has(input:focus-visible) {
  outline: 3px solid rgba(23, 72, 78, .28);
  outline-offset: 3px;
}

.fiabe-app .fiabe-grid,
.fiabe-app .fiabe-balance-grid,
.fiabe-app .fiabe-wallet-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.fiabe-app .fiabe-feature,
.fiabe-app .fiabe-balance-card,
.fiabe-app .fiabe-pack {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 10px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.fiabe-app .fiabe-feature:hover,
.fiabe-app .fiabe-pack:hover {
  border-color: rgba(238, 121, 76, .25);
  box-shadow: 0 26px 68px rgba(71, 52, 37, .13);
  transform: translateY(-3px);
}

.fiabe-app .fiabe-feature p,
.fiabe-app .fiabe-pack p {
  margin: 0;
}

.fiabe-app .fiabe-feature .fiabe-btn,
.fiabe-app .fiabe-pack .fiabe-btn {
  width: fit-content;
  margin-top: auto;
}

.fiabe-app .fiabe-field {
  display: grid;
  gap: 8px;
}

.fiabe-app .fiabe-field label {
  color: var(--fiabe-ink);
  font-size: 15px;
  font-weight: 800;
}

.fiabe-app .fiabe-field input,
.fiabe-app .fiabe-field textarea,
.fiabe-app .fiabe-field select {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid #dfd6ce;
  border-radius: 15px;
  background: #fff;
  color: var(--fiabe-ink);
  font: inherit;
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.fiabe-app .fiabe-field textarea {
  min-height: 120px;
  resize: vertical;
}

.fiabe-app .fiabe-field input:focus,
.fiabe-app .fiabe-field textarea:focus,
.fiabe-app .fiabe-field select:focus {
  border-color: var(--fiabe-coral);
  box-shadow: 0 0 0 4px rgba(238, 121, 76, .1);
}

.fiabe-app .fiabe-note,
.fiabe-app .fiabe-free {
  padding: 16px 18px;
  border: 1px solid rgba(41, 113, 82, .14);
  border-radius: 18px;
  background: #edf5ef;
  color: #486158;
}

.fiabe-app .fiabe-note--error {
  border-color: rgba(187, 74, 47, .2);
  background: #fff0eb;
  color: #873b28;
}

/* Library and access */
.fiabe-library-page .fiabe-auth,
.fiabe-result-page .fiabe-empty,
.fiabe-status-page .fiabe-empty {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 58px);
}

.fiabe-library-page .fiabe-auth {
  display: grid;
  gap: 17px;
  text-align: left;
}

.fiabe-library-page .fiabe-auth h2,
.fiabe-library-page .fiabe-auth p {
  margin: 0;
  text-align: left;
}

.fiabe-library-page .fiabe-auth h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}

.fiabe-library-page .fiabe-auth .fiabe-form {
  display: grid;
  gap: 18px;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--fiabe-line);
}

.fiabe-library-page .fiabe-auth .fiabe-actions {
  justify-content: flex-start;
}

.fiabe-library-page .fiabe-empty {
  text-align: center;
}

.fiabe-library-page .fiabe-empty p {
  max-width: 520px;
  margin: 0 auto 22px;
  font-size: 19px;
}

.fiabe-library-page .fiabe-empty .fiabe-actions {
  justify-content: center;
}

/* Wallet, purchases and history */
.fiabe-wallet-page .fiabe-balance-card {
  min-height: 220px;
  padding-top: 30px;
}

.fiabe-wallet-page .fiabe-balance-card::after {
  content: "";
  width: 46px;
  height: 5px;
  order: -1;
  margin-bottom: 10px;
  border-radius: 999px;
  background: var(--fiabe-coral);
}

.fiabe-wallet-page .fiabe-balance-card:nth-child(2)::after {
  background: var(--fiabe-gold);
}

.fiabe-wallet-page .fiabe-balance-card:nth-child(3)::after {
  background: var(--fiabe-night);
}

.fiabe-wallet-page .fiabe-balance-card > span,
.fiabe-wallet-page .fiabe-wallet-summary strong {
  color: #7d7066;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fiabe-wallet-page .fiabe-balance-card > strong,
.fiabe-wallet-page .fiabe-wallet-summary span {
  color: var(--fiabe-ink);
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(30px, 4vw, 43px);
  line-height: 1.1;
}

.fiabe-wallet-page .fiabe-balance-card p {
  margin: auto 0 0;
}

.fiabe-wallet-page .fiabe-movements {
  margin-top: 22px;
}

.fiabe-app .fiabe-section__inline {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fiabe-app .fiabe-section__inline h2 {
  margin: 0;
}

.fiabe-app .fiabe-transaction-list {
  display: grid;
}

.fiabe-app .fiabe-transaction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--fiabe-line);
}

.fiabe-app .fiabe-transaction span,
.fiabe-app .fiabe-transaction time {
  display: block;
  color: var(--fiabe-copy);
  font-size: 14px;
}

.fiabe-app .fiabe-transaction .is-positive {
  color: #287457;
  font-weight: 800;
}

.fiabe-app .fiabe-transaction .is-negative {
  color: #a04e31;
  font-weight: 800;
}

.fiabe-wallet-page .fiabe-pack-grid {
  align-items: stretch;
  margin-top: 24px;
}

.fiabe-wallet-page .fiabe-pack {
  min-height: 370px;
}

.fiabe-wallet-page .fiabe-pack:nth-child(2) {
  border-color: rgba(238, 121, 76, .35);
  background: linear-gradient(180deg, #fff, #fff8f1);
  box-shadow: 0 28px 72px rgba(184, 83, 50, .14);
}

.fiabe-wallet-page .fiabe-pack .fiabe-eyebrow {
  margin-bottom: 2px;
}

.fiabe-wallet-page .fiabe-pack > strong {
  margin-top: 8px;
  color: var(--fiabe-night);
  font-family: "Merriweather", Georgia, serif;
  font-size: 25px;
}

.fiabe-wallet-page .fiabe-price {
  color: var(--fiabe-coral-dark) !important;
  font-family: "Merriweather", Georgia, serif;
  font-size: 24px;
  font-weight: 800;
}

.fiabe-wallet-page .fiabe-wallet-summary {
  overflow: hidden;
  gap: 1px;
  margin: 0 0 24px;
  padding: 1px;
  border: 1px solid var(--fiabe-line);
  border-radius: 24px;
  background: var(--fiabe-line);
}

.fiabe-wallet-page .fiabe-wallet-summary > div {
  display: grid;
  gap: 7px;
  padding: 22px;
  background: #fff;
}

/* Honest interactive demo */
.fiabe-demo-page .fiabe-section__head {
  margin-bottom: 30px;
}

.fiabe-demo-reader {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
  overflow: hidden;
  border-radius: 32px;
  background: var(--fiabe-night);
  box-shadow: 0 32px 86px rgba(20, 55, 59, .2);
}

.fiabe-demo-visual {
  position: relative;
  min-height: 610px;
  padding: 22px;
  background: #28585c;
}

.fiabe-demo-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 566px;
  border-radius: 23px;
  object-fit: cover;
  object-position: 50% 50%;
  transition: object-position .5s ease, opacity .2s ease;
}

.fiabe-demo-page-count {
  position: absolute;
  right: 38px;
  bottom: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(13, 39, 43, .83);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.fiabe-demo-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
}

.fiabe-demo-copy .fiabe-eyebrow {
  background: #f9edc8;
}

.fiabe-demo-copy h2,
.fiabe-demo-copy p {
  color: #fff;
}

.fiabe-demo-copy h2 {
  max-width: 560px;
  font-size: clamp(31px, 4vw, 48px);
}

.fiabe-demo-text {
  min-height: 160px;
  margin: 12px 0 24px;
  padding-left: 22px;
  border-left: 3px solid var(--fiabe-gold);
}

.fiabe-demo-text p {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(18px, 2vw, 22px);
  font-style: italic;
  line-height: 1.8;
}

.fiabe-demo-meter {
  overflow: hidden;
  width: 100%;
  height: 5px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
}

.fiabe-demo-meter span {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: var(--fiabe-gold);
  transition: width .25s ease;
}

.fiabe-demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fiabe-demo-copy .fiabe-btn--soft {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.fiabe-demo-copy .fiabe-btn--soft:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.fiabe-demo-copy .fiabe-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
}

.fiabe-demo-audio-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .68) !important;
  font-size: 14px;
}

.fiabe-demo-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

/* Generated story reader */
.fiabe-reader-page .fiabe-cover-image {
  display: block;
  width: min(100%, 680px);
  max-width: 680px;
  aspect-ratio: 4 / 3;
  margin: 30px auto 0;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: var(--fiabe-shadow);
}

.fiabe-reader-page .fiabe-audio-shell {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(25px, 4vw, 38px);
  border: 0;
  border-radius: 28px;
  background: var(--fiabe-night);
  color: #fff;
}

.fiabe-reader-page .fiabe-audio-shell h2,
.fiabe-reader-page .fiabe-audio-shell p {
  color: #fff;
}

.fiabe-reader-page .fiabe-player-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 18px 0;
}

.fiabe-reader-page .fiabe-progress {
  overflow: hidden;
  flex: 1 1 200px;
  min-width: 150px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  cursor: pointer;
}

.fiabe-reader-page .fiabe-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--fiabe-gold);
}

.fiabe-reader-page .fiabe-audio-shell .fiabe-control {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.fiabe-reader-page .fiabe-story-pages {
  display: grid;
  gap: 22px;
  margin: 28px 0;
}

.fiabe-reader-page .fiabe-story-page {
  display: grid;
  grid-template-columns: minmax(240px, 41%) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 50px);
  align-items: center;
}

.fiabe-reader-page .fiabe-page-image,
.fiabe-reader-page .fiabe-illustration-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 22px;
  object-fit: cover;
}

.fiabe-reader-page .fiabe-illustration-placeholder {
  display: grid;
  min-height: 230px;
  place-items: center;
  padding: 24px;
  border: 1px dashed rgba(23, 72, 78, .25);
  background: var(--fiabe-sage) !important;
  color: var(--fiabe-night);
  text-align: center;
}

.fiabe-reader-page .fiabe-story-page p {
  margin: 12px 0 0;
  color: #554b43;
  font-size: 18px;
  line-height: 1.75;
}

.fiabe-reader-page .fiabe-fragments {
  display: grid;
  gap: 8px;
}

.fiabe-reader-page .fiabe-fragment {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
}

.fiabe-reader-page .fiabe-fragment.is-active {
  background: #fff1cf;
  box-shadow: inset 4px 0 0 var(--fiabe-coral);
}

/* Personal library */
.fiabe-library-heading {
  align-items: flex-end !important;
  margin-bottom: 30px !important;
}

.fiabe-library-heading .fiabe-section__head {
  max-width: 690px;
  margin: 0;
}

.fiabe-library-heading .fiabe-actions {
  justify-content: flex-end;
}

.fiabe-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 320px));
  gap: 24px;
}

.fiabe-library-card {
  overflow: hidden;
  padding: 0 !important;
}

.fiabe-library-cover {
  display: grid;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  place-items: center;
  background: linear-gradient(145deg, #f5dba7, #cfe7dc);
  color: var(--fiabe-night);
  font-size: 54px;
}

.fiabe-library-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.fiabe-library-card:hover .fiabe-library-cover img {
  transform: scale(1.025);
}

.fiabe-library-card__body {
  display: grid;
  gap: 13px;
  padding: 24px;
}

.fiabe-library-card__body h2,
.fiabe-library-card__body p {
  margin: 0;
}

.fiabe-library-card__body h2 {
  font-size: clamp(23px, 3vw, 30px);
}

.fiabe-library-card__body p {
  color: var(--fiabe-copy);
}

.fiabe-library-details {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fiabe-library-details span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(24, 77, 80, .12);
  border-radius: 999px;
  background: #f2f6f1;
  color: var(--fiabe-night);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.fiabe-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #7d7066;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fiabe-library-meta > * + *::before {
  content: "·";
  margin-right: 8px;
}

.fiabe-library-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  width: fit-content;
  margin-top: 4px;
  color: var(--fiabe-coral-dark);
  font-weight: 900;
}

/* Status and payment result pages */
.fiabe-status-page .fiabe-empty,
.fiabe-result-page .fiabe-empty {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.fiabe-status-page .fiabe-empty > *,
.fiabe-result-page .fiabe-empty > * {
  max-width: 100%;
}

.fiabe-status-page .fiabe-empty .fiabe-wallet-summary {
  width: 100%;
}

.fiabe-status-page .fiabe-empty::after,
.fiabe-result-page .fiabe-empty::after {
  content: "";
  display: block;
  width: 68px;
  height: 6px;
  margin: 0 auto 24px;
  border-radius: 999px;
  background: var(--fiabe-coral);
  order: -1;
}

.fiabe-status-page .fiabe-empty h1,
.fiabe-result-page .fiabe-empty h1 {
  font-size: clamp(34px, 4.5vw, 52px);
  text-align: center;
}

.fiabe-status-page .fiabe-empty > p:not(.fiabe-eyebrow),
.fiabe-result-page .fiabe-empty > p {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
}

.fiabe-status-hint {
  color: #7d7066 !important;
  font-size: 15px;
}

.fiabe-status-track {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 4px;
  padding: 0;
  list-style: none;
}

.fiabe-status-track li {
  position: relative;
  display: grid;
  gap: 9px;
  justify-items: center;
  color: #8a7c70;
  font-size: 13px;
  font-weight: 800;
}

.fiabe-status-track li::before {
  content: "";
  position: absolute;
  top: 17px;
  right: calc(50% + 22px);
  left: calc(-50% + 22px);
  height: 2px;
  background: var(--fiabe-line);
}

.fiabe-status-track li:first-child::before {
  display: none;
}

.fiabe-status-track span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--fiabe-line);
  border-radius: 50%;
  background: #fff;
  color: #8a7c70;
}

.fiabe-status-track .is-current span,
.fiabe-status-track .is-done span {
  border-color: var(--fiabe-night);
  background: var(--fiabe-night);
  color: #fff;
}

.fiabe-status-track .is-done span::before {
  content: "✓";
}

.fiabe-status-track .is-done span {
  font-size: 0;
}

.fiabe-status-track .is-current,
.fiabe-status-track .is-done {
  color: var(--fiabe-ink);
}

.fiabe-status-track .is-done::before,
.fiabe-status-track .is-current::before {
  background: var(--fiabe-night);
}

.fiabe-status-page .fiabe-wallet-summary {
  overflow: hidden;
  gap: 1px;
  margin: 26px 0;
  padding: 1px;
  border: 1px solid var(--fiabe-line);
  border-radius: 22px;
  background: var(--fiabe-line);
}

.fiabe-status-page .fiabe-wallet-summary > div {
  display: grid;
  gap: 5px;
  padding: 20px;
  background: #fff;
}

.fiabe-status-page .fiabe-wallet-summary strong {
  color: #7d7066;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fiabe-status-page .fiabe-wallet-summary span {
  color: var(--fiabe-ink);
  font-family: "Merriweather", Georgia, serif;
  font-size: 21px;
}

.fiabe-status-page .fiabe-actions,
.fiabe-result-page .fiabe-actions {
  justify-content: center;
  margin-top: 24px;
}

.fiabe-result-page.is-success .fiabe-empty::after {
  background: #4e9270;
}

.fiabe-result-page.is-error .fiabe-empty::after {
  background: #cf6544;
}

/* Creation status: a living book instead of a generic waiting card. */
.fiabe-status-page .fiabe-section {
  padding-top: clamp(34px, 5vw, 62px);
}

.fiabe-status-page .fiabe-empty {
  width: min(850px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 46px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 5%, rgba(255, 190, 106, .14), transparent 18rem),
    radial-gradient(circle at 91% 12%, rgba(70, 137, 116, .12), transparent 20rem),
    rgba(255, 254, 251, .97);
}

.fiabe-status-page .fiabe-empty::after {
  display: none;
}

.fiabe-status-visual {
  position: relative;
  width: 190px;
  height: 212px;
  margin: 2px auto 26px;
}

.fiabe-status-book {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 50%;
  width: 142px;
  height: 184px;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 23px 27px 27px 23px;
  background: #1d4b50;
  box-shadow: 0 24px 46px rgba(34, 61, 56, .22), -9px 10px 0 #e9d4bb;
  transform: translateX(-50%) rotate(-2.5deg);
  animation: fiabe-book-breathe 3.2s ease-in-out infinite;
}

.fiabe-status-book::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  background: linear-gradient(180deg, transparent, rgba(13, 46, 48, .88));
}

.fiabe-status-book img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiabe-status-book span {
  position: absolute;
  z-index: 1;
  right: 12px;
  top: 12px;
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 248, 224, .9);
  box-shadow: 0 7px 16px rgba(26, 45, 40, .18);
  color: #b56b27;
  font-size: 17px;
}

.fiabe-status-visual > i {
  position: absolute;
  z-index: 3;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f5b550;
  box-shadow: 0 0 0 6px rgba(245, 181, 80, .13);
  animation: fiabe-status-star 2.5s ease-in-out infinite;
}

.fiabe-status-visual > i:nth-of-type(1) { left: 5px; top: 49px; }
.fiabe-status-visual > i:nth-of-type(2) { right: 4px; top: 86px; animation-delay: -.9s; }
.fiabe-status-visual > i:nth-of-type(3) { right: 30px; bottom: 10px; width: 7px; height: 7px; animation-delay: -1.6s; }

@keyframes fiabe-book-breathe {
  0%, 100% { transform: translateX(-50%) rotate(-2.5deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(-1deg) translateY(-7px); }
}

@keyframes fiabe-status-star {
  0%, 100% { opacity: .35; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.15); }
}

.fiabe-status-page .fiabe-empty h1 {
  max-width: 690px;
  margin-bottom: 10px;
  font-size: clamp(32px, 4.2vw, 48px);
}

.fiabe-status-page .fiabe-empty > p:not(.fiabe-eyebrow) {
  margin-top: 0;
  margin-bottom: 12px;
}

.fiabe-status-meter {
  display: grid;
  width: min(620px, 100%);
  gap: 8px;
  margin: 18px auto 4px;
}

.fiabe-status-meter > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #867669;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.fiabe-status-meter strong {
  color: var(--fiabe-coral-dark);
}

.fiabe-status-meter > i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee4da;
}

.fiabe-status-meter b {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9a57, #ee7241, #f5bd5a);
  transition: width .55s ease;
}

.fiabe-status-meter b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, .42) 45%, transparent 70%);
  animation: fiabe-status-shimmer 1.8s linear infinite;
  transform: translateX(-100%);
}

@keyframes fiabe-status-shimmer {
  to { transform: translateX(100%); }
}

.fiabe-status-page .fiabe-status-hint {
  display: inline-flex;
  align-items: center;
  margin-top: 12px !important;
  padding: 9px 13px;
  border-radius: 999px;
  background: #f5f1ea;
  font-size: 13px;
}

.fiabe-status-page .fiabe-status-track {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(650px, 100%);
  margin: 26px auto 3px;
}

.fiabe-status-page .fiabe-status-track span {
  width: 34px;
  height: 34px;
  border-color: #dfd4c9;
  background: #fffbf6;
}

.fiabe-status-page .fiabe-status-track .is-current span {
  border-color: #ef7a48;
  background: #ef7a48;
  box-shadow: 0 0 0 6px rgba(239, 122, 72, .12);
}

.fiabe-status-page .fiabe-status-track .is-done span {
  border-color: #37785e;
  background: #37785e;
}

.fiabe-status-page .fiabe-status-track .is-done::before,
.fiabe-status-page .fiabe-status-track .is-current::before {
  background: linear-gradient(90deg, #4d876e, #ee8556);
}

.fiabe-status-page .fiabe-wallet-summary {
  width: min(680px, 100%) !important;
  margin-top: 24px;
}

.fiabe-status-page [data-creation-status][data-status="completed"] .fiabe-status-book {
  animation: none;
  transform: translateX(-50%) rotate(0);
}

.fiabe-status-page [data-creation-status][data-status="completed"] .fiabe-status-meter b::after,
.fiabe-status-page [data-creation-status][data-status="failed"] .fiabe-status-meter b::after,
.fiabe-status-page [data-creation-status][data-status="refunded"] .fiabe-status-meter b::after {
  animation: none;
}

.fiabe-status-page [data-creation-status][data-status="failed"] .fiabe-status-book,
.fiabe-status-page [data-creation-status][data-status="refunded"] .fiabe-status-book {
  filter: grayscale(.7);
  animation: none;
}

@media (max-width: 620px) {
  .fiabe-status-page .fiabe-container {
    width: min(100% - 18px, 1180px);
  }

  .fiabe-status-page .fiabe-empty {
    padding: 24px 15px;
    border-radius: 24px;
  }

  .fiabe-status-visual {
    width: 150px;
    height: 174px;
    margin-bottom: 18px;
  }

  .fiabe-status-book {
    width: 116px;
    height: 150px;
    border-width: 6px;
    border-radius: 18px 22px 22px 18px;
  }

  .fiabe-status-page .fiabe-empty h1 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .fiabe-status-page .fiabe-status-hint {
    border-radius: 15px;
  }

  .fiabe-status-page .fiabe-status-track {
    gap: 3px;
  }

  .fiabe-status-page .fiabe-status-track li {
    gap: 7px;
    font-size: 10px;
  }

  .fiabe-status-page .fiabe-status-track li::before {
    right: calc(50% + 18px);
    left: calc(-50% + 18px);
  }

  .fiabe-status-page .fiabe-status-track span {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .fiabe-status-page .fiabe-wallet-summary {
    grid-template-columns: 1fr;
  }

  .fiabe-status-page .fiabe-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .fiabe-status-page .fiabe-actions .fiabe-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fiabe-status-book,
  .fiabe-status-visual > i,
  .fiabe-status-meter b::after {
    animation: none !important;
  }
}

/* Wizard alignment with the same editorial system */
.fiabe-create-page {
  --create-ink: var(--fiabe-ink);
  --create-copy: var(--fiabe-copy);
  --create-coral: var(--fiabe-coral);
  --create-coral-dark: var(--fiabe-coral-dark);
  --create-gold: var(--fiabe-gold);
  --create-sage: var(--fiabe-sage);
  --create-night: var(--fiabe-night);
  --create-line: var(--fiabe-line);
  --create-shadow: var(--fiabe-shadow);
  background: var(--fiabe-bg);
}

.fiabe-create-page .fiabe-create-hero {
  padding: clamp(36px, 5.5vw, 66px) 0 clamp(30px, 4vw, 48px);
  background:
    radial-gradient(circle at 12% 10%, rgba(242, 189, 92, .13), transparent 23rem),
    radial-gradient(circle at 90% 4%, rgba(58, 116, 100, .1), transparent 24rem),
    transparent;
}

.fiabe-create-page .fiabe-create-back {
  margin-bottom: 20px;
  color: #6a5140;
  font-size: 14px;
  font-weight: 800;
}

.fiabe-create-page .fiabe-create-hero h1 {
  max-width: 790px;
  margin-bottom: 16px;
  font-size: clamp(40px, 5.2vw, 62px);
  line-height: 1.05;
}

.fiabe-create-page .fiabe-create-hero__inner > div:first-child > p:last-child {
  color: var(--fiabe-copy);
  font-size: clamp(17px, 1.8vw, 20px);
}

.fiabe-create-page .fiabe-create-gift,
.fiabe-create-page .fiabe-create-progress,
.fiabe-create-page .fiabe-create-form,
.fiabe-create-page .fiabe-create-aside__card {
  border-color: var(--fiabe-line);
  background: rgba(255, 254, 253, .96);
  box-shadow: var(--fiabe-shadow);
}

.fiabe-create-page .fiabe-create-gift {
  border-radius: 22px;
}

.fiabe-create-page .fiabe-create-gift > span {
  background: #fff0c5;
  color: #8a5b13;
}

.fiabe-create-page .fiabe-create-progress {
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(71, 52, 37, .06);
}

.fiabe-create-page .fiabe-create-form {
  border: 1px solid var(--fiabe-line);
  border-radius: 30px;
}

.fiabe-create-page .fiabe-step-heading h2 {
  max-width: 740px;
  margin-bottom: 8px;
  font-size: clamp(26px, 3.2vw, 37px);
  line-height: 1.14;
}

.fiabe-create-page .fiabe-step-heading > span {
  background: var(--fiabe-night);
}

.fiabe-create-page .fiabe-step-heading p {
  color: var(--fiabe-coral-dark);
}

.fiabe-create-page .fiabe-step-heading small {
  color: var(--fiabe-copy);
}

.fiabe-create-page .fiabe-create-aside__cover {
  background:
    linear-gradient(180deg, rgba(14, 49, 54, .06) 20%, rgba(14, 49, 54, .78) 100%),
    url("/fiabe-personalizzate/assets/images/fiabe-hero.webp") center / cover no-repeat;
}

.fiabe-create-page .fiabe-create-aside__cover > span {
  filter: drop-shadow(0 4px 9px rgba(10, 37, 41, .35));
}

.fiabe-create-page .fiabe-create-aside__cover small,
.fiabe-create-page .fiabe-create-aside__cover strong {
  text-shadow: 0 2px 12px rgba(10, 37, 41, .55);
}

.fiabe-create-page .fiabe-theme-card > strong,
.fiabe-create-page .fiabe-style-card__copy strong,
.fiabe-create-page .fiabe-voice-card__copy strong,
.fiabe-create-page .fiabe-length-card strong,
.fiabe-create-page .fiabe-free-story-card strong {
  font-family: "Merriweather", Georgia, serif;
  letter-spacing: -.02em;
}

.fiabe-create-page .fiabe-theme-card,
.fiabe-create-page .fiabe-style-card,
.fiabe-create-page .fiabe-voice-card,
.fiabe-create-page .fiabe-length-card,
.fiabe-create-page .fiabe-free-story-card {
  border-color: var(--fiabe-line);
  background: #fffefd;
}

.fiabe-create-page .fiabe-theme-card:hover,
.fiabe-create-page .fiabe-style-card:hover,
.fiabe-create-page .fiabe-voice-card:hover,
.fiabe-create-page .fiabe-length-card:not(.is-disabled):hover {
  border-color: rgba(238, 121, 76, .28);
}

@media (max-width: 980px) {
  .fiabe-demo-reader {
    grid-template-columns: 1fr;
  }

  .fiabe-demo-visual {
    min-height: 500px;
  }

  .fiabe-demo-visual img {
    min-height: 456px;
  }

  .fiabe-demo-copy {
    padding: 40px;
  }
}

@media (max-width: 760px) {
  .fiabe-app {
    font-size: 16px;
  }

  .fiabe-app .fiabe-container {
    width: min(100% - 26px, 1180px);
  }

  .fiabe-app .fiabe-section {
    padding: 42px 0 60px;
  }

  .fiabe-app h1 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .fiabe-app h2 {
    font-size: clamp(26px, 8vw, 35px);
  }

  .fiabe-app .fiabe-card {
    padding: 22px 18px;
    border-radius: 23px;
  }

  .fiabe-app .fiabe-grid,
  .fiabe-app .fiabe-balance-grid,
  .fiabe-app .fiabe-wallet-summary,
  .fiabe-status-page .fiabe-wallet-summary {
    grid-template-columns: 1fr;
  }

  .fiabe-app .fiabe-section__inline {
    align-items: flex-start;
    flex-direction: column;
  }

  .fiabe-app .fiabe-transaction {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
  }

  .fiabe-app .fiabe-transaction time {
    grid-column: 1 / -1;
  }

  .fiabe-reader-page .fiabe-story-page {
    grid-template-columns: 1fr;
  }

  .fiabe-demo-visual {
    min-height: 390px;
    padding: 14px;
  }

  .fiabe-demo-visual img {
    min-height: 362px;
    border-radius: 18px;
  }

  .fiabe-demo-page-count {
    right: 26px;
    bottom: 26px;
  }

  .fiabe-demo-copy {
    padding: 30px 22px 34px;
  }

  .fiabe-demo-text {
    min-height: 178px;
  }

  .fiabe-demo-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fiabe-demo-controls .fiabe-btn {
    width: 100%;
  }

  .fiabe-library-page .fiabe-auth .fiabe-actions,
  .fiabe-library-heading .fiabe-actions,
  .fiabe-result-page .fiabe-actions,
  .fiabe-status-page .fiabe-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fiabe-library-page .fiabe-auth .fiabe-btn,
  .fiabe-library-heading .fiabe-btn,
  .fiabe-result-page .fiabe-btn,
  .fiabe-status-page .fiabe-btn {
    width: 100%;
  }

  .fiabe-status-track li {
    font-size: 11px;
  }
}

/* Unified storybook reader */
.fiabe-reader-page {
  --reader-font-scale: 1;
}

.fiabe-reader-page [hidden] {
  display: none !important;
}

.fiabe-reader-page .fiabe-reader-container {
  width: min(1320px, calc(100% - 48px));
}

.fiabe-reader-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: end;
  margin-bottom: 34px;
}

.fiabe-reader-intro > div {
  max-width: 840px;
}

.fiabe-reader-intro .fiabe-reader-back {
  display: block;
  width: fit-content;
  margin-bottom: 30px;
  color: #765943;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.fiabe-reader-intro .fiabe-reader-back:hover {
  color: var(--fiabe-coral-dark);
}

.fiabe-reader-intro h1 {
  max-width: 840px;
  margin-bottom: 14px;
  font-size: clamp(38px, 5vw, 66px);
}

.fiabe-reader-intro > div > p:last-child,
.fiabe-reader-intro__note {
  margin: 0;
  color: var(--fiabe-copy);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.65;
}

.fiabe-reader-intro__note {
  max-width: 430px;
  padding-left: 22px;
  border-left: 3px solid var(--fiabe-gold);
}

.fiabe-reader-cover-preview {
  position: relative;
  width: min(100%, 300px);
  margin: 0 0 0 auto;
  padding: 10px;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(73, 49, 31, .14);
  transform: rotate(1.2deg);
}

.fiabe-reader-cover-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  object-fit: cover;
}

.fiabe-reader-cover-preview figcaption {
  position: absolute;
  right: -18px;
  bottom: 20px;
  display: grid;
  min-width: 190px;
  gap: 2px;
  padding: 12px 15px;
  border-radius: 16px;
  background: rgba(255, 252, 247, .96);
  box-shadow: 0 10px 26px rgba(49, 39, 30, .16);
  color: var(--fiabe-ink);
}

.fiabe-reader-cover-preview figcaption span {
  color: var(--fiabe-coral-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fiabe-reader-cover-preview figcaption strong {
  font-size: 14px;
}

.fiabe-book-reader {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 34px;
  background: #17484e;
  box-shadow: 0 34px 90px rgba(15, 49, 53, .22);
  color: #fff;
  transition: background-color .25s ease, box-shadow .25s ease;
}

.fiabe-reader-toolbar {
  display: flex;
  min-height: 68px;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 10px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  background: rgba(6, 35, 38, .2);
}

.fiabe-reader-toolgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.fiabe-reader-tool {
  appearance: none;
  display: inline-flex;
  min-width: 43px;
  min-height: 42px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .92);
  cursor: pointer;
  font: 700 14px/1 "Mukta", Arial, sans-serif;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.fiabe-reader-tool:hover,
.fiabe-reader-tool[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}

.fiabe-reader-tool:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
}

.fiabe-reader-tool--wide {
  padding-inline: 15px;
}

.fiabe-reader-announcement {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  font-weight: 700;
}

.fiabe-reader-stage {
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(410px, .96fr);
  min-height: 720px;
}

.fiabe-reader-visuals {
  display: grid;
  min-width: 0;
  padding: clamp(17px, 2.2vw, 28px);
  background: #28585c;
}

.fiabe-reader-visual {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 650px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 26px;
  background: #123d42;
  box-shadow: 0 24px 58px rgba(5, 27, 30, .25);
  animation: fiabe-reader-reveal .28s ease both;
}

.fiabe-reader-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 650px;
  max-height: 780px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.fiabe-reader-placeholder {
  display: grid;
  min-height: 650px;
  place-items: center;
  padding: 32px;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

.fiabe-reader-visual figcaption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(8, 39, 43, .82);
  box-shadow: 0 8px 22px rgba(5, 25, 28, .18);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.fiabe-reader-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4.7vw, 68px);
}

.fiabe-reader-copy__pages {
  display: grid;
  min-height: 310px;
  align-items: center;
}

.fiabe-reader-scene {
  outline: 0;
  animation: fiabe-reader-reveal .28s ease both;
}

.fiabe-reader-kicker {
  margin: 0 0 14px !important;
  color: #f3c66d !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.fiabe-reader-copy .fiabe-reader-scene h2 {
  max-width: 620px;
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.12;
}

.fiabe-reader-prose {
  max-width: 650px;
  padding-left: 22px;
  border-left: 3px solid var(--fiabe-gold);
}

.fiabe-reader-page .fiabe-reader-prose p,
.fiabe-reader-page .fiabe-reader-prose .fiabe-fragment {
  margin: 0 0 12px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, .88);
  cursor: default;
  font-family: "Merriweather", Georgia, serif;
  font-size: calc(19px * var(--reader-font-scale));
  font-weight: 700;
  font-style: italic;
  line-height: 1.78;
  transition: color .18s ease, background-color .18s ease, padding .18s ease;
}

.fiabe-reader-page .fiabe-reader-prose .fiabe-fragment[data-fragment-id] {
  cursor: pointer;
}

.fiabe-reader-page .fiabe-reader-prose .fiabe-fragment.is-active {
  margin-left: -12px;
  padding: 7px 12px;
  background: rgba(242, 189, 92, .17);
  box-shadow: inset 3px 0 0 var(--fiabe-gold);
  color: #fff6dd;
}

.fiabe-audio-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  margin-top: 28px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: rgba(255, 255, 255, .065);
}

.fiabe-audio-play {
  appearance: none;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--fiabe-gold);
  box-shadow: 0 10px 25px rgba(6, 33, 37, .24);
  color: #153f44;
  cursor: pointer;
}

.fiabe-audio-play:hover {
  background: #ffd277;
  transform: translateY(-1px);
}

.fiabe-audio-play__icon {
  display: block;
  margin-left: 2px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.fiabe-audio-main {
  min-width: 0;
}

.fiabe-audio-heading {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  color: rgba(255, 255, 255, .93);
  font-size: 14px;
}

.fiabe-audio-heading > span {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
}

.fiabe-audio-range {
  width: 100%;
  height: 18px;
  margin: 4px 0 1px;
  accent-color: var(--fiabe-gold);
  cursor: pointer;
}

.fiabe-audio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fiabe-audio-actions button {
  appearance: none;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  font: 700 12px/1.2 "Mukta", Arial, sans-serif;
}

.fiabe-audio-actions button:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.fiabe-audio-panel--pending,
.fiabe-audio-panel--preview {
  grid-template-columns: auto minmax(0, 1fr);
}

.fiabe-audio-pending-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--fiabe-gold);
  color: #153f44;
  font-size: 23px;
  font-weight: 900;
}

.fiabe-audio-panel--pending strong,
.fiabe-audio-panel--preview strong {
  color: #fff;
}

.fiabe-audio-panel--pending p,
.fiabe-audio-panel--preview p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .66);
  font-size: 14px;
  line-height: 1.45;
}

.fiabe-reader-navigation {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
}

.fiabe-reader-arrow {
  appearance: none;
  display: inline-flex;
  min-height: 44px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  cursor: pointer;
  font: 800 14px/1 "Mukta", Arial, sans-serif;
}

.fiabe-reader-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, .14);
}

.fiabe-reader-arrow:disabled {
  opacity: .3;
  cursor: default;
}

.fiabe-reader-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.fiabe-reader-dots button {
  appearance: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}

.fiabe-reader-dots button.is-active {
  width: 28px;
  background: var(--fiabe-gold);
}

.fiabe-reader-after {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 8px 4px;
}

.fiabe-reader-after > p {
  margin: 0;
}

.fiabe-reader-after--demo {
  justify-content: center;
}

.fiabe-book-reader.is-night {
  background: #081f23;
  box-shadow: 0 34px 90px rgba(4, 22, 25, .32);
}

.fiabe-book-reader.is-night .fiabe-reader-visuals {
  background: #102f34;
}

.fiabe-book-reader.is-night .fiabe-reader-visual img {
  filter: brightness(.82) saturate(.88);
}

body.fiabe-focus-mode {
  background: #0d3034;
}

body.fiabe-focus-mode > header,
body.fiabe-focus-mode > .breadcrumbs,
body.fiabe-focus-mode > footer {
  display: none !important;
}

body.fiabe-focus-mode .fiabe-reader-page {
  min-height: 100vh;
  background: #0d3034;
}

body.fiabe-focus-mode .fiabe-reader-page .fiabe-section {
  min-height: 100vh;
  padding: 18px 0;
}

body.fiabe-focus-mode .fiabe-reader-intro,
body.fiabe-focus-mode .fiabe-reader-after {
  display: none;
}

body.fiabe-focus-mode .fiabe-reader-container {
  width: min(1480px, calc(100% - 32px));
}

body.fiabe-focus-mode .fiabe-book-reader {
  min-height: calc(100vh - 36px);
}

body.fiabe-focus-mode .fiabe-reader-stage {
  min-height: calc(100vh - 104px);
}

@keyframes fiabe-reader-reveal {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1050px) {
  .fiabe-reader-stage {
    grid-template-columns: minmax(320px, .9fr) minmax(390px, 1.1fr);
  }

  .fiabe-reader-copy {
    padding: 38px;
  }

  .fiabe-reader-visual,
  .fiabe-reader-visual img,
  .fiabe-reader-placeholder {
    min-height: 590px;
  }
}

@media (max-width: 820px) {
  .fiabe-reader-intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .fiabe-reader-intro__note {
    max-width: 680px;
  }

  .fiabe-reader-cover-preview {
    width: min(100%, 250px);
    margin: 0;
  }

  .fiabe-reader-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .fiabe-reader-stage {
    grid-template-columns: 1fr;
  }

  .fiabe-reader-visual,
  .fiabe-reader-visual img,
  .fiabe-reader-placeholder {
    min-height: 520px;
    max-height: 650px;
  }

  .fiabe-reader-visual img {
    aspect-ratio: 4 / 3;
  }

  .fiabe-reader-copy__pages {
    min-height: 260px;
  }
}

@media (max-width: 560px) {
  .fiabe-reader-page .fiabe-reader-container {
    width: min(100% - 20px, 1320px);
  }

  .fiabe-reader-intro .fiabe-reader-back {
    margin-bottom: 22px;
  }

  .fiabe-reader-intro h1 {
    font-size: clamp(34px, 11vw, 46px);
  }

  .fiabe-reader-cover-preview {
    width: min(78vw, 270px);
  }

  .fiabe-reader-cover-preview figcaption {
    right: -8px;
    bottom: 14px;
    min-width: 165px;
  }

  .fiabe-book-reader {
    border-radius: 24px;
  }

  .fiabe-reader-toolbar {
    min-height: auto;
    gap: 10px;
    padding: 12px;
  }

  .fiabe-reader-toolgroup {
    display: grid;
    width: 100%;
    grid-template-columns: auto auto 1fr 1fr;
  }

  .fiabe-reader-tool {
    min-width: 40px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .fiabe-reader-tool--wide {
    gap: 5px;
  }

  .fiabe-reader-announcement {
    padding-left: 3px;
  }

  .fiabe-reader-visuals {
    padding: 11px;
  }

  .fiabe-reader-visual {
    border-radius: 18px;
  }

  .fiabe-reader-visual,
  .fiabe-reader-visual img,
  .fiabe-reader-placeholder {
    min-height: 390px;
    max-height: 520px;
  }

  .fiabe-reader-visual img {
    aspect-ratio: 4 / 5;
  }

  .fiabe-reader-copy {
    padding: 28px 20px 24px;
  }

  .fiabe-reader-copy__pages {
    min-height: 0;
  }

  .fiabe-reader-copy .fiabe-reader-scene h2 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .fiabe-reader-prose {
    padding-left: 15px;
  }

  .fiabe-reader-page .fiabe-reader-prose p,
  .fiabe-reader-page .fiabe-reader-prose .fiabe-fragment {
    font-size: calc(17px * var(--reader-font-scale));
    line-height: 1.7;
  }

  .fiabe-audio-panel {
    grid-template-columns: 1fr;
  }

  .fiabe-audio-play {
    width: 48px;
    height: 48px;
  }

  .fiabe-audio-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .fiabe-reader-navigation {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .fiabe-reader-dots {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 4px;
  }

  .fiabe-reader-arrow {
    grid-row: 2;
  }

  .fiabe-reader-after,
  .fiabe-reader-after--demo {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }

  .fiabe-reader-after .fiabe-actions,
  .fiabe-reader-after .fiabe-btn {
    width: 100%;
  }
}

/* Continuous story reader */
.fiabe-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.fiabe-book-reader--continuous {
  overflow: visible;
  border-color: #e8dfd3;
  background: #fffdf9;
  box-shadow: 0 28px 80px rgba(65, 45, 30, .1);
  color: var(--fiabe-ink);
}

.fiabe-book-reader--continuous .fiabe-reader-toolbar {
  position: sticky;
  z-index: 20;
  top: 10px;
  margin: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: rgba(20, 70, 76, .94);
  box-shadow: 0 12px 34px rgba(13, 47, 51, .18);
  backdrop-filter: blur(16px);
}

.fiabe-book-reader--continuous .fiabe-reader-tool--evening {
  border-color: rgba(244, 194, 99, .38);
  color: #fff5d7;
}

.fiabe-story-feed {
  display: grid;
  gap: clamp(70px, 9vw, 124px);
  width: min(940px, 100%);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 72px) clamp(24px, 5vw, 64px) 170px;
}

.fiabe-feed-scene {
  display: grid;
  gap: clamp(25px, 4vw, 42px);
  scroll-margin-top: 110px;
}

.fiabe-feed-scene:not(:last-child)::after {
  width: 72px;
  height: 1px;
  margin: clamp(20px, 4vw, 42px) auto 0;
  background: #ded3c5;
  content: "";
}

.fiabe-feed-illustration {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #e9e1d5;
  box-shadow: 0 22px 58px rgba(65, 45, 30, .13);
}

.fiabe-feed-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #ede5d9;
}

.fiabe-feed-illustration figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(13, 52, 56, .78);
  box-shadow: 0 8px 22px rgba(5, 25, 28, .18);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.fiabe-feed-copy {
  width: min(760px, 100%);
  margin: 0 auto;
}

.fiabe-feed-copy > h2:not(.fiabe-visually-hidden) {
  margin: 0 0 18px;
  color: var(--fiabe-ink);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.16;
}

.fiabe-book-reader--continuous .fiabe-reader-kicker {
  margin-bottom: 12px !important;
  color: #ad653f !important;
}

.fiabe-book-reader--continuous .fiabe-reader-prose {
  max-width: none;
  padding: 0;
  border: 0;
}

.fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose p,
.fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose .fiabe-fragment {
  margin: 0 0 15px;
  padding: 3px 7px;
  color: #41372f;
  font-family: "Merriweather", Georgia, serif;
  font-size: calc(19px * var(--reader-font-scale));
  font-weight: 700;
  font-style: normal;
  line-height: 1.82;
  text-wrap: pretty;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose .fiabe-fragment[data-fragment-id] {
  cursor: pointer;
}

.fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose .fiabe-fragment.is-active {
  margin-left: 0;
  padding: 8px 12px;
  background: #fff1cb;
  box-shadow: inset 4px 0 0 #ed9e3e;
  color: #2f261f;
}

.fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-flow {
  margin: 0 0 15px;
  color: #41372f;
  font-family: "Merriweather", Georgia, serif;
  font-size: calc(19px * var(--reader-font-scale));
  font-weight: 700;
  line-height: 1.82;
  text-wrap: pretty;
}

.fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-flow .fiabe-fragment {
  display: inline;
  margin: 0;
  padding: 3px;
  font: inherit;
  line-height: inherit;
}

.fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-flow .fiabe-fragment + .fiabe-fragment::before {
  content: " ";
}

.fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-flow .fiabe-fragment--dialogue {
  display: block;
  margin: 15px 0;
}

.fiabe-audio-panel--floating {
  position: fixed;
  z-index: 120;
  right: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  width: min(780px, calc(100% - 32px));
  grid-template-columns: auto 46px 58px 46px minmax(180px, 1fr) 48px;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 24px;
  background: rgba(13, 53, 58, .96);
  box-shadow: 0 18px 50px rgba(9, 34, 37, .3);
  color: #fff;
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.fiabe-audio-time {
  display: flex;
  gap: 4px;
  align-items: center;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fiabe-audio-panel--floating .fiabe-audio-play {
  width: 58px;
  height: 58px;
}

.fiabe-audio-skip,
.fiabe-audio-speed {
  appearance: none;
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  font: 800 12px/1 "Mukta", Arial, sans-serif;
}

.fiabe-audio-skip {
  position: relative;
  font-size: 22px;
}

.fiabe-audio-skip small {
  font-size: 9px;
  line-height: 1;
}

.fiabe-audio-skip:hover,
.fiabe-audio-speed:hover {
  background: rgba(255, 255, 255, .15);
}

.fiabe-audio-speed {
  border-radius: 14px;
  color: #ffe3a6;
  display: none;
}

.fiabe-audio-panel--floating .fiabe-audio-heading {
  margin-bottom: 1px;
  font-size: 12px;
}

.fiabe-audio-panel--floating .fiabe-audio-range {
  display: block;
  height: 16px;
  margin: 0;
}

.fiabe-audio-panel--inline {
  width: min(720px, calc(100% - 48px));
  margin: 0 auto 46px;
  background: #17484e;
}

body.fiabe-reading-mode {
  background-color: #071e2b;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(244, 194, 99, .16) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 33%, rgba(255, 255, 255, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 76%, rgba(244, 194, 99, .12) 0 1px, transparent 2px),
    linear-gradient(180deg, #071e2b 0%, #0b2d39 100%);
  background-size: 180px 180px, 240px 240px, 310px 310px, auto;
}

body.fiabe-reading-mode > header,
body.fiabe-reading-mode > .breadcrumbs,
body.fiabe-reading-mode > footer {
  display: none !important;
}

body.fiabe-reading-mode .fiabe-reader-page {
  min-height: 100vh;
  background: transparent;
}

body.fiabe-reading-mode .fiabe-reader-page .fiabe-section {
  min-height: 100vh;
  padding: 0 0 40px;
}

body.fiabe-reading-mode .fiabe-reader-intro,
body.fiabe-reading-mode .fiabe-reader-after,
body.fiabe-reading-mode .fiabe-demo-picker,
body.fiabe-reading-mode .fiabe-story-management {
  display: none !important;
}

body.fiabe-reading-mode .fiabe-reader-container {
  width: min(1060px, 100%);
}

.fiabe-book-reader--continuous.is-evening {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fiabe-book-reader--continuous.is-evening .fiabe-reader-toolbar {
  top: 10px;
  width: min(930px, calc(100% - 24px));
  margin: 10px auto;
  background: rgba(7, 31, 43, .9);
}

.fiabe-book-reader--continuous.is-evening .fiabe-story-feed {
  padding-top: 44px;
}

.fiabe-book-reader--continuous.is-evening .fiabe-feed-scene:not(:last-child)::after {
  background: rgba(255, 255, 255, .13);
}

.fiabe-book-reader--continuous.is-evening .fiabe-feed-illustration {
  background: #0b2a34;
  box-shadow: 0 26px 72px rgba(0, 0, 0, .3);
}

.fiabe-book-reader--continuous.is-evening .fiabe-feed-illustration img {
  background: #0b2a34;
  filter: brightness(.84) saturate(.9);
}

.fiabe-book-reader--continuous.is-evening .fiabe-reader-kicker {
  color: #f0bb5b !important;
}

.fiabe-book-reader--continuous.is-evening .fiabe-feed-copy > h2 {
  color: #fff7e7;
}

.fiabe-reader-page .fiabe-book-reader--continuous.is-evening .fiabe-reader-prose p,
.fiabe-reader-page .fiabe-book-reader--continuous.is-evening .fiabe-reader-prose .fiabe-fragment {
  color: rgba(255, 249, 237, .9);
}

.fiabe-reader-page .fiabe-book-reader--continuous.is-evening .fiabe-reader-prose .fiabe-fragment.is-active {
  background: rgba(238, 166, 66, .16);
  box-shadow: inset 4px 0 0 #f0b95c;
  color: #fff1c9;
}

@media (max-width: 700px) {
  .fiabe-reader-page .fiabe-reader-container {
    width: min(100% - 16px, 1320px);
  }

  .fiabe-book-reader--continuous {
    border-radius: 22px;
  }

  .fiabe-book-reader--continuous .fiabe-reader-toolbar {
    top: 6px;
    min-height: 56px;
    align-items: center;
    flex-direction: row;
    margin: 7px;
    padding: 7px 9px;
    border-radius: 17px;
  }

  .fiabe-book-reader--continuous .fiabe-reader-toolgroup {
    display: flex;
    width: auto;
    flex-wrap: nowrap;
  }

  .fiabe-book-reader--continuous .fiabe-reader-tool {
    min-width: 42px;
    min-height: 42px;
    padding: 7px 10px;
  }

  .fiabe-book-reader--continuous .fiabe-reader-tool--evening {
    max-width: 152px;
  }

  .fiabe-book-reader--continuous .fiabe-reader-announcement {
    display: none;
  }

  .fiabe-story-feed {
    gap: 58px;
    padding: 24px 12px 145px;
  }

  .fiabe-feed-scene {
    gap: 24px;
    scroll-margin-top: 82px;
  }

  .fiabe-feed-illustration {
    border-radius: 18px;
  }

  .fiabe-feed-illustration figcaption {
    right: 10px;
    bottom: 10px;
    padding: 7px 10px;
  }

  .fiabe-feed-copy {
    padding: 0 5px;
  }

  .fiabe-feed-copy > h2:not(.fiabe-visually-hidden) {
    margin-bottom: 14px;
    font-size: clamp(27px, 8vw, 34px);
  }

  .fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose p,
  .fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose .fiabe-fragment {
    margin-bottom: 12px;
    padding: 3px 5px;
    font-size: calc(18px * var(--reader-font-scale));
    line-height: 1.76;
  }

  .fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose .fiabe-fragment.is-active {
    padding: 7px 10px;
  }

  .fiabe-audio-panel--floating {
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100% - 16px);
    grid-template-columns: minmax(46px, auto) 44px 56px 44px 44px;
    gap: 6px;
    padding: 9px 10px 8px;
    border-radius: 20px;
  }

  .fiabe-audio-time {
    justify-content: center;
    font-size: 11px;
  }

  .fiabe-audio-time span:nth-child(2),
  .fiabe-audio-time span:nth-child(3) {
    display: none;
  }

  .fiabe-audio-panel--floating .fiabe-audio-play {
    width: 56px;
    height: 56px;
  }

  .fiabe-audio-panel--floating .fiabe-audio-main {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .fiabe-audio-panel--floating .fiabe-audio-heading {
    display: none;
  }

  .fiabe-audio-panel--floating .fiabe-audio-range {
    height: 14px;
  }

  .fiabe-audio-panel--inline {
    width: calc(100% - 24px);
    margin-bottom: 30px;
  }

  body.fiabe-reading-mode .fiabe-reader-container {
    width: 100%;
  }

  .fiabe-book-reader--continuous.is-evening,
  .fiabe-book-reader--continuous.is-evening .fiabe-feed-illustration {
    border-radius: 0;
  }

  .fiabe-book-reader--continuous.is-evening .fiabe-reader-toolbar {
    top: 6px;
    width: calc(100% - 14px);
    margin: 7px auto;
  }
}

/* Story library management */
.fiabe-create-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 17px;
  border: 1px solid rgba(23, 72, 78, .16);
  border-radius: 19px;
  background: #edf4ed;
}

.fiabe-create-source > span {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 13px;
  background: var(--fiabe-night);
  color: #fff;
  font-weight: 900;
}

.fiabe-create-source p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #5e6e61;
  font-size: 14px;
  line-height: 1.45;
}

.fiabe-create-source strong {
  color: #294b3d;
  font-size: 16px;
}

.fiabe-create-source a {
  color: #72594b;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.fiabe-library-trash-link {
  display: inline-flex;
  min-height: 44px;
  gap: 8px;
  align-items: center;
  padding: 9px 4px;
  color: #786b62;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.fiabe-library-trash-link span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #eee8df;
  color: #5c5149;
  font-size: 12px;
}

.fiabe-library-notice {
  margin: -6px 0 28px;
  padding: 13px 17px;
  border: 1px solid rgba(52, 119, 87, .18);
  border-radius: 16px;
  background: #edf6ee;
  color: #35674f;
  font-weight: 700;
}

.fiabe-library-card__footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  padding-top: 14px;
  border-top: 1px solid var(--fiabe-line);
}

.fiabe-library-card__footer > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

.fiabe-privacy-badge {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
}

.fiabe-privacy-badge.is-private {
  background: #edf2ee;
  color: #456451;
}

.fiabe-privacy-badge.is-review {
  background: #fff0d1;
  color: #8a5b13;
}

.fiabe-privacy-badge.is-public {
  background: #dff3e5;
  color: #266143;
}

.fiabe-library-archive,
.fiabe-library-restore {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8c7062;
  cursor: pointer;
  font: 800 13px/1.3 "Mukta", Arial, sans-serif;
  text-decoration: underline;
  text-decoration-color: rgba(140, 112, 98, .28);
  text-underline-offset: 3px;
}

.fiabe-library-archive:hover {
  color: #a04432;
}

.fiabe-library-restore {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(23, 72, 78, .18);
  border-radius: 999px;
  color: var(--fiabe-night);
  text-decoration: none;
}

.fiabe-library-card.is-archived .fiabe-library-cover img {
  filter: grayscale(.5) brightness(.9);
}

.fiabe-story-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #fffefd;
  box-shadow: 0 30px 90px rgba(32, 24, 18, .28);
  color: #302923;
}

.fiabe-story-dialog::backdrop {
  background: rgba(15, 38, 40, .62);
  backdrop-filter: blur(4px);
}

.fiabe-story-dialog form {
  display: grid;
  justify-items: center;
  padding: clamp(27px, 6vw, 44px);
  text-align: center;
}

.fiabe-story-dialog__icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 19px;
  place-items: center;
  border-radius: 50%;
  background: #fff0d8;
  color: #a86722;
  font-size: 27px;
}

.fiabe-story-dialog h2 {
  margin: 0 0 12px;
  color: #302923;
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(25px, 5vw, 34px);
  line-height: 1.2;
}

.fiabe-story-dialog p {
  max-width: 410px;
  margin: 0 0 25px;
  color: #6f655d;
  font: 400 17px/1.6 "Mukta", Arial, sans-serif;
}

.fiabe-story-dialog .fiabe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.fiabe-story-dialog .fiabe-btn {
  appearance: none;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #ee794c;
  color: #fff;
  cursor: pointer;
  font: 800 15px/1 "Mukta", Arial, sans-serif;
}

.fiabe-story-dialog .fiabe-btn--soft {
  border-color: rgba(64, 52, 43, .14);
  background: #fff;
  color: #554b43;
}

.fiabe-story-dialog .fiabe-btn--danger {
  background: #a64b38;
}

.fiabe-story-management {
  margin-top: clamp(54px, 8vw, 96px);
  padding: clamp(28px, 5vw, 62px);
  border: 1px solid var(--fiabe-line);
  border-radius: 34px;
  background: rgba(255, 254, 253, .9);
  box-shadow: var(--fiabe-shadow);
}

.fiabe-story-management__heading {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .65fr);
  gap: clamp(26px, 5vw, 70px);
  align-items: end;
  margin-bottom: 34px;
}

.fiabe-story-management__heading h2 {
  margin-bottom: 0;
}

.fiabe-story-management__heading > p {
  margin: 0;
}

.fiabe-story-management__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.fiabe-story-option {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  border: 1px solid var(--fiabe-line);
  border-radius: 25px;
  background: #f7f3eb;
}

.fiabe-story-option--continue {
  background: linear-gradient(150deg, #f9e5c1, #f2eee0);
}

.fiabe-story-option--privacy {
  background: #eaf1eb;
}

.fiabe-story-option__number {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 26px;
  place-items: center;
  border-radius: 14px;
  background: var(--fiabe-night);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.fiabe-story-option h3 {
  margin-bottom: 9px;
  font-size: clamp(22px, 2.2vw, 28px);
}

.fiabe-story-option p {
  margin: 0;
  color: #6f655d;
  font-size: 16px;
  line-height: 1.55;
}

.fiabe-story-option > a,
.fiabe-story-option form button {
  appearance: none;
  display: inline-flex;
  width: fit-content;
  gap: 8px;
  align-items: center;
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fiabe-coral-dark);
  cursor: pointer;
  font: 900 15px/1.3 "Mukta", Arial, sans-serif;
  text-decoration: none;
}

.fiabe-story-option__status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.fiabe-story-management__danger {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 20px 23px;
  border: 1px solid rgba(149, 72, 51, .14);
  border-radius: 20px;
  background: #fff9f5;
}

.fiabe-story-management__danger strong {
  color: #5c453b;
}

.fiabe-story-management__danger p {
  margin: 2px 0 0;
  color: #84736a;
  font-size: 14px;
}

.fiabe-story-management__danger button {
  appearance: none;
  flex: 0 0 auto;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: #a04432;
  cursor: pointer;
  font: 800 14px/1.3 "Mukta", Arial, sans-serif;
  text-decoration: underline;
  text-decoration-color: rgba(160, 68, 50, .3);
  text-underline-offset: 3px;
}

body.fiabe-focus-mode .fiabe-story-management {
  display: none;
}

@media (max-width: 900px) {
  .fiabe-story-management__heading {
    grid-template-columns: 1fr;
  }

  .fiabe-story-management__grid {
    grid-template-columns: 1fr;
  }

  .fiabe-story-option {
    min-height: 0;
  }
  .fiabe-reader-cover-preview {
    display: none;
  }
}

@media (max-width: 560px) {
  .fiabe-create-source {
    grid-template-columns: auto 1fr;
  }

  .fiabe-create-source a {
    grid-column: 1 / -1;
    padding-left: 53px;
  }

  .fiabe-library-card__footer,
  .fiabe-library-card__footer > div,
  .fiabe-story-management__danger {
    align-items: flex-start;
    flex-direction: column;
  }

  .fiabe-story-management {
    padding: 22px 16px;
    border-radius: 25px;
  }

  .fiabe-story-option {
    padding: 22px 19px;
  }

  .fiabe-story-dialog .fiabe-actions,
  .fiabe-story-dialog .fiabe-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fiabe-app *,
  .fiabe-app *::before,
  .fiabe-app *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (max-width: 780px) {
  .fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose .fiabe-fragment.is-active {
    padding: 3px 10px;
  }
  .fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-flow {
    text-align: justify;
    line-height: 1.5em;
  }
  .fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose p, .fiabe-reader-page .fiabe-book-reader--continuous .fiabe-reader-prose .fiabe-fragment {
    font-size: calc(16px * var(--reader-font-scale));
  }
  .fiabe-feed-scene:not(:last-child)::after {
    display: none;
    margin: 0;
  }
  .fiabe-reading-mode {
    padding-top: 0;
  }
  .fiabe-book-reader--continuous .fiabe-feed-illustration img, .fiabe-book-reader--continuous.is-evening .fiabe-feed-illustration img {
    border-radius: 10px;
  }
}