.feature-showcase-media[data-animation-slot="05"] { container: songbook-animation / inline-size; overflow: visible; }
.songbook-demo {
  --atelier-line: #c9d7cd;
  --atelier-forest: #183d2c;
  --book-ease: cubic-bezier(.165, .84, .44, 1);
  width: 100%; min-width: 0; align-self: center; margin: 0; padding-top: 12px;
  color: #111318; font: 400 10px/1.4 var(--font-body);
}
.songbook-demo-screen { position: relative; height: 406px; overflow: hidden; border: 1px solid #b9ccbc; border-radius: 10px; background: #e7efe8; pointer-events: none; user-select: none; }
.songbook-demo-selection, .songbook-demo-editor { position: absolute; inset: 0; opacity: 0; transform: translateX(18px) scale(.98); transition: opacity 500ms ease, transform 850ms var(--book-ease); }
.songbook-demo[data-view="selection"] .songbook-demo-selection,
.songbook-demo[data-view="editor"] .songbook-demo-editor { opacity: 1; transform: translateX(0) scale(1); }
.songbook-demo-selection { display: grid; grid-template-columns: 36px minmax(0, 1fr); background: #e9f7e9; }
.songbook-demo-sidebar { display: flex; flex-direction: column; align-items: center; gap: 15px; padding-top: 14px; border-right: 1px solid #dfe3ea; background: #fff; }
.songbook-demo-logo { margin-bottom: 9px; border-radius: 5px; }
.songbook-demo-sidebar > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; }
.songbook-demo-sidebar > span img { object-fit: contain; opacity: .68; }
.songbook-demo-sidebar .is-active { background: #2f4858; }
.songbook-demo-sidebar .is-active img { opacity: 1; transform: scale(.86); }
.songbook-demo-library { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px 10px 12px; }
.songbook-demo-heading { margin-bottom: 11px; }
.songbook-demo-heading > span { display: block; margin-bottom: 4px; color: #6b7280; font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }
.songbook-demo-heading > strong { display: block; font: 400 23px/1.05 var(--font-display); }
.songbook-demo-search { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 6px 8px; border: 1px solid #d6dee4; border-radius: 5px; color: #6b7280; background: #fff; font-size: 8px; }
.songbook-demo-search svg { flex-shrink: 0; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.songbook-demo-list-label { margin: 12px 0 8px; color: #5b7063; font-size: 7px; }
.songbook-demo-list { display: grid; gap: 7px; }
.songbook-demo-song { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 8px; border: 1px solid #dfe3ea; border-radius: 7px; background: #fff; transition: border-color 450ms ease, background 450ms ease, box-shadow 450ms ease; }
.songbook-demo-song > span:last-child { min-width: 0; }
.songbook-demo-song strong { display: block; font-size: 9px; font-weight: 500; line-height: 1.25; }
.songbook-demo-song small { display: block; margin-top: 3px; color: #788078; font-size: 6.5px; }
.songbook-demo-check { display: grid; place-items: center; flex-shrink: 0; width: 14px; height: 14px; border: 1px solid #c1cebf; border-radius: 4px; background: #fff; transition: background 350ms ease, border-color 350ms ease; }
.songbook-demo-check svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.7; opacity: 0; transform: scale(.5); transition: opacity 350ms ease, transform 500ms var(--book-ease); }
.songbook-demo-song[data-selected="true"] { border-color: #52775d; background: #fcfffb; box-shadow: 2px 2px 0 #496c55; }
.songbook-demo-song[data-selected="true"] .songbook-demo-check { border-color: #183d2c; background: #183d2c; }
.songbook-demo-song[data-selected="true"] .songbook-demo-check svg { opacity: 1; transform: scale(1); }
.songbook-demo-selection-footer { display: grid; gap: 7px; margin-top: auto; padding-top: 11px; font-size: 8px; }
.songbook-demo-selection-footer > span:first-child { color: #546c5c; font-variant-numeric: tabular-nums; }
.songbook-demo-create { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; padding: 7px; border-radius: 5px; color: #fff; background: #111318; font-size: 9px; transition: opacity 350ms ease; }
.songbook-demo-create svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.songbook-demo[data-count="0"] .songbook-demo-create { opacity: .4; }
.songbook-demo-workspace { display: grid; grid-template-columns: 30px minmax(0, 1fr); height: 309px; }
.songbook-demo-rail { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 11px 4px; border-right: 1px solid var(--atelier-line); background: #f8fcf7; }
.songbook-demo-rail > span { font-size: 5px; text-transform: uppercase; }
.songbook-demo-thumbnail { position: relative; display: grid; align-content: start; gap: 3px; flex-shrink: 0; width: 20px; height: 27px; padding: 6px 3px; border: 1px solid #c0cdc0; border-radius: 2px; background: #fffdf8; transition: border-color 450ms ease, box-shadow 450ms ease; }
.songbook-demo-thumbnail i { height: 1px; background: #c4ccc2; }
.songbook-demo-thumbnail small { position: absolute; bottom: -9px; left: 0; right: 0; text-align: center; color: #738076; font-size: 5px; }
.songbook-demo-thumbnail.is-cover i:first-child { width: 8px; height: 8px; margin: -2px auto 0; background: #b3d4b5; }
.songbook-demo[data-page="cover"] .songbook-demo-thumbnail.is-cover,
.songbook-demo[data-page="spread"][data-spread="first"] [data-book-target="pages-first"],
.songbook-demo[data-page="spread"][data-spread="last"] [data-book-target="pages-last"] { border-color: #51755c; box-shadow: 0 0 0 1px #a7c7a8; }
.songbook-demo-canvas { position: relative; min-width: 0; }
.songbook-demo-canvas-heading { display: flex; justify-content: space-between; gap: 5px; padding: 10px 8px 0; color: #617068; font-size: 6px; }
.songbook-demo-canvas-heading > span:last-child { color: var(--atelier-forest); }
.songbook-demo-paper-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 266px; perspective: 800px; }
.songbook-demo-cover { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(174px, 82%); height: 239px; padding: 15px; color: #23452f; background: #fffdf8; box-shadow: 0 2px 0 #dee2d8, 0 4px 0 #fafbf2, 0 12px 18px -8px #2647303d; opacity: 0; transform: translateX(-24px) rotateY(-12deg) scale(.92); transition: opacity 450ms ease, transform 850ms var(--book-ease); }
.songbook-demo-cover > img { margin-bottom: 17px; border-radius: 50%; }
.songbook-demo-cover-title { text-align: center; font: 400 26px/1.1 "Atelier Demo Garamond", Georgia, serif; }
.songbook-demo-cover-rule { width: 28px; height: 1px; margin: 14px 0; background: #729577; }
.songbook-demo-cover > strong { font-size: 8px; font-weight: 500; }
.songbook-demo-cover > small { margin-top: 5px; font-size: 6px; color: #738076; }
.songbook-demo-spread { display: flex; position: absolute; width: 96%; height: 206px; opacity: 0; transform: translateX(22px) rotateY(8deg) scale(.95); box-shadow: 0 2px 0 #dee2d8, 0 4px 0 #fafbf2, 0 12px 18px -8px #2647303d; transition: opacity 450ms ease, transform 850ms var(--book-ease); }
.songbook-demo[data-page="cover"] .songbook-demo-cover,
.songbook-demo[data-page="spread"] .songbook-demo-spread { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
.songbook-demo-paper { position: relative; width: 50%; min-width: 0; overflow: hidden; padding: 13px 9px 22px; background: #fffdf8; font-family: "Atelier Demo Garamond", Georgia, serif; }
.songbook-demo-paper + .songbook-demo-paper { border-left: 1px solid #d8ded0; background: linear-gradient(90deg, #e8eadb8c, #fffdf8 10%); }
.songbook-demo-song-number { display: block; margin-bottom: 5px; color: #689070; font: 400 6px/1 var(--font-body); }
.songbook-demo-paper > strong { display: block; min-height: 3.2em; color: #24462f; font-size: 10px; font-weight: 500; line-height: 1.15; }
.songbook-demo-lines { display: grid; gap: 5px; margin-top: 8px; }
.songbook-demo-lines i { width: 100%; height: 1px; background: #b0b9a8; opacity: .65; }
.songbook-demo-lines i:nth-child(2) { width: 91%; }
.songbook-demo-lines i:last-child { width: 68%; }
.songbook-demo-verse { display: block; margin-top: 10px; color: #527b5b; font-size: 6.5px; }
.songbook-demo-paper-footer { position: absolute; bottom: 8px; left: 9px; right: 9px; display: flex; justify-content: space-between; padding-top: 4px; border-top: 1px solid #d8ded0; color: #81907f; font: 400 4.5px/1 var(--font-body); }
.songbook-demo-zoom { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; padding: 3px 7px; border: 1px solid var(--atelier-line); border-radius: 5px; background: #f8fcf7; color: #536b59; font-size: 9px; }
.songbook-demo-zoom span { font-size: 6px; }
.songbook-demo-spread[data-book-spread="last"] { animation: songbook-page-turn 750ms var(--book-ease) both; }
@keyframes songbook-page-turn { from { opacity: .35; transform: translateX(12px) rotateY(-6deg); } to { opacity: 1; transform: translateX(0) rotateY(0); } }
.songbook-demo-cursor { position: absolute; z-index: 3; top: 0; left: 0; opacity: 0; transform: translate(var(--book-cursor-x, 25px), var(--book-cursor-y, 155px)); transition: transform 700ms var(--book-ease), opacity 200ms ease; }
.songbook-demo[data-pointer]:not([data-pointer=""]) .songbook-demo-cursor { opacity: 1; }
.songbook-demo-cursor > svg { display: block; width: 21px; height: 25px; fill: #183d2c; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.songbook-demo-cursor > span { position: absolute; top: -10px; left: -10px; width: 25px; height: 25px; border: 1px solid #4d9663; border-radius: 50%; background: #a2d5a333; opacity: 0; }
.songbook-demo[data-click="true"] .songbook-demo-cursor > span { animation: songbook-click 600ms ease-out both; }
@keyframes songbook-click { from { opacity: .7; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }
.songbook-demo-caption { display: flex; align-items: center; gap: 7px; min-height: 53px; padding: 8px 3px 0; color: #35573e; font-size: 9px; }
.songbook-demo-caption i { display: grid; place-items: center; flex-shrink: 0; width: 21px; height: 21px; border: 1px solid #bcd6c0; border-radius: 50%; font-size: 7px; font-style: normal; font-variant-numeric: tabular-nums; }
.songbook-demo[data-running="false"] *, .songbook-demo[data-running="false"] *::after { animation-play-state: paused !important; }
@container songbook-animation (max-width: 270px) {
  .songbook-demo-selection { grid-template-columns: 30px minmax(0, 1fr); }
  .songbook-demo-sidebar > span { width: 25px; height: 25px; }
  .songbook-demo-library { padding-right: 8px; padding-left: 8px; }
  .songbook-demo-song { gap: 6px; padding: 7px; }
  .songbook-demo-song strong { font-size: 8px; }
  .songbook-demo-cover-title { font-size: 23px; }
  .songbook-demo-paper { padding-right: 6px; padding-left: 6px; }
  .songbook-demo-paper > strong { font-size: 9px; }
  .songbook-demo .atelier-demo-topbar { padding-right: 7px; padding-left: 7px; }
  .songbook-demo .atelier-demo-save { max-width: 60px; }
  .songbook-demo .atelier-demo-tool > span { font-size: 4.7px; }
}
@media (prefers-reduced-motion: reduce) {
  .songbook-demo *, .songbook-demo *::after { animation: none !important; transition: none !important; }
  .songbook-demo-cursor { display: none; }
}