:root {
  --red: #d2352d;
  --red-dark: #b92c24;
  --ink: #151515;
  --text: #3e3a35;
  --muted: #948b7e;
  --paper: #f5efe3;
  --panel: #ebe6dc;
  --workspace: #f7f2e7;
  --book-paper: #fff;
  --book-page-bg: #fff;
  --book-accent: transparent;
  --book-text: #191512;
  --book-muted: #6d6257;
  --book-photo-filter: none;
  --book-decor: transparent;
  --book-decor-strong: #d2352d;
  --book-photo-border: rgba(25, 21, 18, 0.08);
  --book-photo-radius: 0px;
  --book-page-shadow: var(--shadow);
  --book-title-letter-spacing: 0.08em;
  --book-note-letter-spacing: 0;
  --slot-empty: #ede8df;
  --line: #d8d0c3;
  --soft-line: rgba(21, 21, 21, 0.1);
  --shadow: 0 28px 64px rgba(62, 51, 37, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 1180px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f8f4ea;
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(210, 53, 45, 0.55);
  outline-offset: 2px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.editor-topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: 105px 142px 1fr auto 172px;
  align-items: center;
  height: 58px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
}

.topbar-back,
.topbar-order {
  border: 0;
}

.topbar-back {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 0;
  background: transparent;
  color: #9d9589;
  font-size: 18px;
}

.topbar-back svg {
  flex: 0 0 auto;
  color: #b5ac9f;
}

.upload-icon svg {
  color: #9e968a;
}

.topbar-brand {
  color: #000;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.topbar-section {
  color: #9b9286;
  font-size: 18px;
  font-weight: 600;
}

.topbar-progress {
  margin-right: 26px;
  color: #9b9286;
  font-size: 14px;
  white-space: nowrap;
}

.topbar-order {
  display: grid;
  min-height: 39px;
  place-items: center;
  background: #c83a32;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.book-editor-app {
  display: grid;
  grid-template-columns: 256px minmax(700px, 1fr) 256px;
  height: calc(100vh - 58px);
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}

.photo-panel,
.inspector-panel {
  min-height: 0;
  background: var(--panel);
}

.photo-panel {
  height: 100%;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.upload-card {
  display: grid;
  width: calc(100% - 24px);
  min-height: 124px;
  margin: 14px 12px 17px;
  padding: 18px 22px;
  place-items: center;
  border: 2px solid #c9bdad;
  background: transparent;
  color: #80786b;
  text-align: center;
  line-height: 1.35;
}

.upload-card:hover,
.upload-card.is-dragging {
  border-color: var(--red);
  color: var(--red);
}

.upload-icon {
  display: grid;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  place-items: center;
  color: #9e968a;
}

.rail-heading {
  padding: 0 12px 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #9c9285;
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 36px;
  text-transform: uppercase;
}

.photo-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.photo-empty {
  grid-column: 1 / -1;
  align-self: center;
  min-height: 390px;
  margin: 0;
  padding: 0 20px;
  display: grid;
  place-items: center;
  color: #948b7e;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.photo-thumb {
  position: relative;
  overflow: hidden;
  height: 92px;
  padding: 0;
  border: 2px solid transparent;
  background: #f4eee4;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-thumb span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  background: rgba(21, 21, 21, 0.72);
  color: #fff;
  font-size: 10px;
}

.photo-thumb.is-selected {
  border-color: var(--red);
}

.rail-subheading {
  padding: 13px 12px 0;
  color: #9c9285;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.spread-list {
  display: grid;
  gap: 20px;
  padding: 14px 12px 28px;
}

.spread-thumb {
  display: grid;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9d958a;
  text-align: center;
}

.spread-thumb-preview {
  --spread-thumb-scale: 0.3184;
  position: relative;
  display: block;
  width: 100%;
  height: calc((448px * var(--spread-thumb-scale)) + 4px);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--book-page-bg);
  box-shadow: 0 1px 0 rgba(21, 21, 21, 0.04);
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.book-spread-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 716px;
  height: 448px;
  box-shadow: none;
  pointer-events: none;
  transform: scale(var(--spread-thumb-scale));
  transform-origin: top left;
  transition: none;
}

.book-spread-thumb .photo-slot:hover,
.book-spread-thumb .photo-slot.is-selected,
.book-spread-thumb .page-title:hover,
.book-spread-thumb .page-title.is-selected,
.book-spread-thumb .page-note:hover,
.book-spread-thumb .page-note.is-selected,
.book-spread-thumb .page-qr.is-selected {
  outline: none;
  box-shadow: none;
}

.spread-thumb:hover .spread-thumb-preview,
.spread-thumb.is-active .spread-thumb-preview {
  border-color: var(--book-decor-strong);
  transform: translateY(-1px);
}

.thumb-page {
  position: relative;
  overflow: hidden;
  border-right: 1px solid #ece7dd;
  background: var(--book-page-bg);
}

.thumb-page:last-child {
  border-right: 0;
}

.thumb-page::before {
  position: absolute;
  inset: 4px;
  border: 1px solid var(--book-accent);
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

.thumb-object {
  position: absolute;
  display: block;
  overflow: hidden;
}

.thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: #eee8de;
  background-position: center;
  background-size: cover;
  filter: var(--book-photo-filter);
}

.thumb-img.is-empty {
  border: 1px dashed rgba(21, 21, 21, 0.16);
  background-image: none !important;
}

.thumb-title {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--book-text);
  font-family: Georgia, serif;
  font-size: 5px;
  line-height: 1.05;
  text-align: left;
  white-space: pre-line;
}

.thumb-note {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--book-muted);
  font-family: Georgia, serif;
  font-size: 4px;
  line-height: 1.15;
  white-space: pre-line;
}

.thumb-qr {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 1px solid rgba(21, 21, 21, 0.36);
  background: #fff;
  color: #151515;
  font-size: 5px;
  font-weight: 800;
}

body[data-book-style="mono"] .spread-thumb-preview {
  background: #151515;
}

body[data-book-style="mono"] .thumb-img {
  box-shadow: 0 0 0 1px rgba(21, 21, 21, 0.42) inset;
  filter: grayscale(1) contrast(1.14);
}

body[data-book-style="bright"] .spread-thumb-preview {
  background: #fff3df;
}

body[data-book-style="bright"] .thumb-img {
  box-shadow: 0 0 0 1px rgba(231, 125, 40, 0.2);
  filter: saturate(1.18);
}

body[data-book-style="childhood"] .thumb-img {
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(116, 105, 45, 0.12);
  filter: saturate(1.04) brightness(1.02);
}

body[data-book-style="romance"] .spread-thumb-preview {
  background: #f4dde9;
}

body[data-book-style="romance"] .thumb-img {
  box-shadow: 0 4px 8px rgba(92, 46, 73, 0.12);
  filter: saturate(0.95) sepia(0.06);
}

body[data-book-style="romance"] .spread-thumb-preview {
  --romance-thumb-art: none;
  --romance-thumb-bottom: 8%;
  --romance-thumb-left: auto;
  --romance-thumb-right: 7%;
  --romance-thumb-top: auto;
  --romance-thumb-width: 34%;
  --romance-thumb-height: 24%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-bloom"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='82' height='54' viewBox='0 0 82 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41 48C29 37 12 29 12 15C12 7 18 3 26 3C33 3 38 8 41 14C44 8 49 3 56 3C64 3 70 7 70 15C70 29 53 37 41 48Z' stroke='%23d99acb' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 43C18 37 27 37 36 42' stroke='%23b77aa9' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="botanical"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='70' height='74' viewBox='0 0 70 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 70C21 48 34 29 56 8' stroke='%23b77aa9' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M24 51C15 50 10 45 8 37C17 36 23 40 26 47M36 32C27 31 22 26 21 18C30 17 36 21 38 28M43 26C53 26 60 31 63 40C53 40 46 36 42 30' stroke='%23d99acb' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 34%;
  --romance-thumb-width: 30%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="ribbon"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='90' height='34' viewBox='0 0 90 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 22C18 4 31 28 45 15C57 4 72 8 87 22' stroke='%23d99acb' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M31 17C37 11 43 11 49 17C43 24 37 24 31 17Z' stroke='%23b77aa9' stroke-width='1.1'/%3E%3C/svg%3E");
  --romance-thumb-height: 18%;
  --romance-thumb-width: 42%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="orbit"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='76' height='62' viewBox='0 0 76 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='38' cy='31' rx='29' ry='14' transform='rotate(-18 38 31)' stroke='%23d99acb' stroke-width='1.2'/%3E%3Cellipse cx='38' cy='31' rx='18' ry='30' transform='rotate(34 38 31)' stroke='%23b77aa9' stroke-width='1.05'/%3E%3Ccircle cx='61' cy='19' r='2.4' fill='%23d99acb'/%3E%3Cpath d='M38 39C33 35 27 31 27 24C27 20 30 18 34 18C36 18 37 19 38 21C39 19 41 18 43 18C47 18 50 20 50 24C50 31 44 35 38 39Z' stroke='%23d99acb' stroke-width='1.1'/%3E%3C/svg%3E");
  --romance-thumb-height: 30%;
  --romance-thumb-width: 35%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="petals"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='76' height='58' viewBox='0 0 76 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12C27 15 31 23 30 32C21 32 14 27 12 19C13 15 15 13 19 12ZM55 8C61 14 62 22 58 29C50 25 47 18 49 11C51 9 53 8 55 8ZM39 34C47 38 51 46 49 55C40 55 33 49 31 41C33 37 35 35 39 34Z' stroke='%23d99acb' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M8 49C25 42 46 40 69 44' stroke='%23b77aa9' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 28%;
  --romance-thumb-width: 34%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="garland"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='92' height='46' viewBox='0 0 92 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 15C21 35 68 35 87 13' stroke='%23b77aa9' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M20 25C16 20 16 15 20 10C25 13 27 18 24 24M39 32C35 27 35 22 39 17C44 20 46 25 43 31M61 31C58 25 60 20 66 17C69 23 68 28 63 32M76 23C74 17 76 13 82 10C84 16 83 21 78 25' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 22%;
  --romance-thumb-width: 42%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="rings"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='78' height='48' viewBox='0 0 78 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='31' cy='24' r='17' stroke='%23d99acb' stroke-width='1.5'/%3E%3Ccircle cx='48' cy='24' r='17' stroke='%23b77aa9' stroke-width='1.3'/%3E%3Cpath d='M27 7L31 2L35 7M44 7L48 2L52 7' stroke='%23d99acb' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="rose-corner"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='74' height='74' viewBox='0 0 74 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 59C29 47 37 36 44 20' stroke='%23b77aa9' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M45 20C40 16 40 9 46 5C54 8 57 16 52 23C49 24 47 23 45 20Z' stroke='%23d99acb' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M31 42C24 41 19 36 18 29C26 29 32 33 34 39M37 31C47 31 54 36 57 44C47 44 40 40 36 34' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 34%;
  --romance-thumb-width: 31%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="botanical"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='74' height='78' viewBox='0 0 74 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 70C23 51 39 32 62 8' stroke='%23b77aa9' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M25 50C17 47 13 41 15 33C24 35 28 42 25 50ZM39 33C32 29 30 22 34 15C42 20 44 27 39 33ZM47 25C57 24 64 30 67 39C57 39 50 34 47 25Z' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="ribbon"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='92' height='32' viewBox='0 0 92 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 22C25 11 45 11 64 20C74 25 82 24 88 18' stroke='%23d99acb' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M43 17C36 14 33 9 36 4C44 7 47 12 43 17ZM55 18C63 15 69 17 73 24C64 25 58 23 55 18Z' stroke='%23b77aa9' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="garland"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='92' height='46' viewBox='0 0 92 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 16C25 34 63 35 86 14' stroke='%23b77aa9' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M25 28C17 25 13 19 15 12C24 14 28 21 25 28ZM45 33C38 29 36 22 40 16C48 21 50 28 45 33ZM65 31C73 27 80 29 84 36C76 38 69 36 65 31Z' stroke='%23d99acb' stroke-width='1.02' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="rose-corner"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='74' height='74' viewBox='0 0 74 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 62C29 48 38 35 49 14' stroke='%23b77aa9' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M49 14C44 10 45 5 50 3C57 5 60 12 56 18C53 19 51 18 49 14ZM31 43C23 40 19 34 21 27C30 29 34 36 31 43ZM39 31C48 30 55 35 58 43C49 44 42 39 39 31Z' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor$="-b"] {
  --romance-thumb-left: 7%;
  --romance-thumb-right: auto;
  --romance-thumb-transform: scaleX(-1);
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor$="-c"] {
  --romance-thumb-bottom: auto;
  --romance-thumb-top: 8%;
  --romance-thumb-transform: rotate(-5deg);
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor] .thumb-page:first-child::after {
  position: absolute;
  z-index: 0;
  top: var(--romance-thumb-top);
  right: var(--romance-thumb-right);
  bottom: var(--romance-thumb-bottom);
  left: var(--romance-thumb-left);
  width: var(--romance-thumb-width);
  height: var(--romance-thumb-height);
  background: var(--romance-thumb-art) center / contain no-repeat;
  content: "";
  opacity: 0.58;
  pointer-events: none;
  transform: var(--romance-thumb-transform, none);
}

body[data-book-style="folk"] .spread-thumb-preview {
  background: #fffaf0;
}

body[data-book-style="folk"] .thumb-img {
  border: 1px solid rgba(199, 53, 53, 0.24);
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(113, 57, 36, 0.12);
  filter: saturate(1.04) sepia(0.04);
}

body[data-book-style="vintage"] .thumb-img {
  border: 1px solid rgba(125, 67, 29, 0.22);
  box-shadow: 0 3px 8px rgba(125, 67, 29, 0.12);
  filter: sepia(0.28) saturate(0.9) contrast(0.96);
}

.spread-thumb-number {
  font-size: 11px;
}

.editor-workspace {
  position: relative;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) 84px;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--workspace);
  transition: background 0.22s ease;
}

.workspace-hint {
  display: flex;
  align-items: center;
  height: 44px;
  padding-left: 18px;
  border-bottom: 1px solid var(--line);
  color: #aaa095;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.workspace-scroll {
  display: flex;
  min-height: 0;
  padding: 48px 34px 34px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: auto;
}

.spread-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  width: min(716px, 100%);
  margin-bottom: 13px;
  color: #a0988f;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.book-spread {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  width: 716px;
  height: 448px;
  background: var(--book-page-bg);
  box-shadow: var(--book-page-shadow);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.book-page {
  position: relative;
  overflow: hidden;
  background: var(--book-page-bg);
  transition: background 0.22s ease;
}

.book-page::before {
  position: absolute;
  z-index: 0;
  inset: 16px;
  border: 1px solid var(--book-accent);
  content: "";
  pointer-events: none;
}

.book-page::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.alignment-guide {
  position: absolute;
  z-index: 18;
  pointer-events: none;
}

.alignment-guide-x {
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgba(210, 53, 45, 0.9), rgba(210, 53, 45, 0.36));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48);
  transform: translateX(-0.5px);
}

.alignment-guide-y {
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(210, 53, 45, 0.9), rgba(210, 53, 45, 0.36));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48);
  transform: translateY(-0.5px);
}

.book-page-left {
  box-shadow: inset -7px 0 14px rgba(20, 20, 20, 0.05);
}

.book-page-right {
  box-shadow: inset 7px 0 14px rgba(20, 20, 20, 0.04);
}

.book-spread[data-style="minimal"] .book-page::before {
  inset: 18px;
  border-color: rgba(25, 21, 18, 0.08);
}

.book-spread[data-style="minimal"] .photo-slot {
  box-shadow: none;
}

.book-spread[data-style="minimal"] .book-page-right::after {
  right: 34px;
  bottom: 28px;
  width: 72px;
  height: 1px;
  background: rgba(25, 21, 18, 0.16);
}

.book-spread[data-style="mono"] {
  background: #151515;
}

.book-spread[data-style="mono"] .book-page::before {
  inset: 18px;
  border-color: rgba(255, 255, 255, 0.18);
}

.book-spread[data-style="mono"] .book-page-left::after,
.book-spread[data-style="mono"] .book-page-right::after {
  right: 22px;
  bottom: 20px;
  left: 22px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 16px, transparent 16px 24px);
}

.book-spread[data-style="mono"] .photo-slot {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  filter: grayscale(1) contrast(1.14);
}

.book-spread[data-style="mono"] .page-title {
  text-transform: uppercase;
}

.book-spread[data-style="mono"] .page-title.is-placeholder,
.book-spread[data-style="mono"] .page-note.is-placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.book-spread[data-style="mono"] .photo-slot.is-empty::before {
  color: rgba(255, 255, 255, 0.3);
}

.book-spread[data-style="bright"] .book-page::before {
  inset: 16px;
  border-color: rgba(231, 125, 40, 0.28);
}

.book-spread[data-style="bright"] .book-page-left::after {
  top: -58px;
  right: -48px;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(231, 125, 40, 0.34) 49% 50%, transparent 51%),
    radial-gradient(circle at 50% 50%, transparent 0 66%, rgba(47, 139, 143, 0.22) 67% 68%, transparent 69%);
}

.book-spread[data-style="bright"] .book-page-right::after {
  right: 26px;
  bottom: 20px;
  width: 122px;
  height: 42px;
  background: url("data:image/svg+xml,%3Csvg width='122' height='42' viewBox='0 0 122 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 31 C21 8 45 39 66 17 C84 -1 102 4 120 22' stroke='%23e77d28' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M10 38 C32 22 50 44 72 28 C89 16 103 18 114 30' stroke='%232f8b8f' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.56;
}

.book-spread[data-style="bright"] .photo-slot {
  border-width: 2px;
  border-color: rgba(231, 125, 40, 0.56);
  box-shadow: 0 12px 26px rgba(231, 125, 40, 0.13);
}

.book-spread[data-style="bright"] .slot-large {
  border-radius: 18px 4px 22px 4px;
}

.book-spread[data-style="bright"] .slot-wide,
body[data-book-style="bright"] .thumb-img.wide {
  border-radius: 2px 16px 4px 14px;
}

.book-spread[data-style="bright"] .slot-small-left,
body[data-book-style="bright"] .thumb-small-left {
  border-radius: 14px 3px 12px 4px;
}

.book-spread[data-style="bright"] .slot-small-right,
body[data-book-style="bright"] .thumb-small-right {
  border-radius: 4px 18px 5px 16px;
}

.book-spread[data-style="bright"] .page-title {
  line-height: 1.04;
}

.book-spread[data-style="childhood"] .book-page::before {
  inset: 18px;
  border-color: rgba(197, 187, 115, 0.38);
  border-radius: 18px;
}

.book-spread[data-style="childhood"] .book-page-left::after,
.book-spread[data-style="childhood"] .book-page-right::after {
  inset: 18px;
  background: url("data:image/svg+xml,%3Csvg width='313' height='410' viewBox='0 0 313 410' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 57 L27 68 L39 71 L30 80 L32 92 L21 86 L10 92 L12 80 L3 71 L15 68 Z' stroke='%23c5bb73' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M268 46 C279 49 287 57 291 69 C278 71 266 68 256 60 C259 53 263 49 268 46Z' stroke='%23efbf6f' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M250 342 C268 325 290 340 283 360 C276 380 246 381 238 362 C235 354 240 347 250 342Z' stroke='%23c5bb73' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M38 326 C70 300 106 308 134 340' stroke='%23efbf6f' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0.52;
}

.book-spread[data-style="childhood"] .photo-slot {
  border-width: 2px;
  border-color: rgba(197, 187, 115, 0.38);
  box-shadow: 0 10px 24px rgba(116, 105, 45, 0.13);
}

.book-spread[data-style="childhood"] .slot-small-left,
body[data-book-style="childhood"] .thumb-small-left {
  border-radius: 50%;
}

.book-spread[data-style="childhood"] .slot-small-right,
body[data-book-style="childhood"] .thumb-small-right {
  border-radius: 34px;
}

.book-spread[data-style="romance"] {
  background: #f4dde9;
  --romance-left-art: none;
  --romance-left-bottom: 20px;
  --romance-left-height: 82px;
  --romance-left-left: auto;
  --romance-left-opacity: 0.66;
  --romance-left-right: 24px;
  --romance-left-top: auto;
  --romance-left-transform: none;
  --romance-left-width: 128px;
  --romance-right-art: none;
  --romance-right-bottom: 24px;
  --romance-right-height: 64px;
  --romance-right-left: auto;
  --romance-right-opacity: 0.54;
  --romance-right-right: 28px;
  --romance-right-top: auto;
  --romance-right-transform: none;
  --romance-right-width: 108px;
}

.book-spread[data-style="romance"] .book-page::before {
  inset: 14px;
  border-color: rgba(198, 90, 166, 0.16);
}

.book-spread[data-style="romance"] .book-page-left::after {
  top: var(--romance-left-top);
  right: var(--romance-left-right);
  bottom: var(--romance-left-bottom);
  left: var(--romance-left-left);
  width: var(--romance-left-width);
  height: var(--romance-left-height);
  background: var(--romance-left-art) center / contain no-repeat;
  opacity: var(--romance-left-opacity);
  transform: var(--romance-left-transform);
  transform-origin: center;
}

.book-spread[data-style="romance"] .book-page-right::after {
  top: var(--romance-right-top);
  right: var(--romance-right-right);
  bottom: var(--romance-right-bottom);
  left: var(--romance-right-left);
  width: var(--romance-right-width);
  height: var(--romance-right-height);
  background: var(--romance-right-art) center / contain no-repeat;
  opacity: var(--romance-right-opacity);
  transform: var(--romance-right-transform);
  transform-origin: center;
}

.book-spread[data-style="romance"][data-decor^="heart-bloom"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='128' height='84' viewBox='0 0 128 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M64 74C46 58 24 46 24 26C24 14 33 7 45 7C54 7 60 13 64 22C68 13 74 7 83 7C95 7 104 14 104 26C104 46 82 58 64 74Z' stroke='%23d99acb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 66C29 57 43 58 56 66M29 60C27 54 29 49 35 46C38 52 37 57 31 61M47 62C50 55 56 52 64 54C61 62 55 66 48 65' stroke='%23b77aa9' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='114' height='68' viewBox='0 0 114 68' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 55C32 40 55 41 84 18' stroke='%23b77aa9' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M30 44C20 42 14 35 13 25C23 25 31 31 34 40M58 32C48 30 42 23 42 13C52 13 60 19 63 28M73 23C82 23 90 28 94 37C84 38 76 34 71 27' stroke='%23d99acb' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: 28px;
  --romance-right-height: 68px;
  --romance-right-width: 114px;
}

.book-spread[data-style="romance"][data-decor^="botanical"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='116' height='154' viewBox='0 0 116 154' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 148C24 101 52 61 98 9' stroke='%23b77aa9' stroke-width='1.55' stroke-linecap='round'/%3E%3Cpath d='M30 109C18 107 10 99 8 87C22 86 31 94 35 104M51 78C39 75 32 66 32 53C45 54 53 62 57 73M66 60C82 60 94 69 100 83C84 84 72 78 64 66M82 38C72 35 66 27 66 16C77 18 85 25 88 35' stroke='%23d99acb' stroke-width='1.18' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 154px;
  --romance-left-left: 22px;
  --romance-left-right: auto;
  --romance-left-top: 22px;
  --romance-left-width: 116px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='106' height='76' viewBox='0 0 106 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 61C32 51 53 51 93 20' stroke='%23b77aa9' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M32 48C25 44 22 38 25 31C33 34 37 40 35 47M50 42C43 38 41 31 44 24C52 27 56 34 54 41M68 33C76 32 84 37 88 45C79 46 72 42 68 36M80 25C73 22 70 16 72 9C80 11 85 17 84 24' stroke='%23d99acb' stroke-width='1.08' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: 26px;
  --romance-right-height: 76px;
  --romance-right-width: 106px;
}

.book-spread[data-style="romance"][data-decor^="ribbon"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='154' height='56' viewBox='0 0 154 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 37C25 9 48 50 73 24C95 2 123 11 150 34' stroke='%23d99acb' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M51 25C61 15 72 15 82 25C72 36 61 36 51 25Z' stroke='%23b77aa9' stroke-width='1.15'/%3E%3Cpath d='M67 26C64 33 58 38 49 41M67 26C74 33 82 37 92 39' stroke='%23b77aa9' stroke-width='1.08' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 4px;
  --romance-left-height: 56px;
  --romance-left-left: 26px;
  --romance-left-right: auto;
  --romance-left-width: 154px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='98' height='76' viewBox='0 0 98 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M49 9C56 22 66 31 86 35C67 39 56 48 49 63C42 48 31 39 12 35C32 31 42 22 49 9Z' stroke='%23d99acb' stroke-width='1.35' stroke-linejoin='round'/%3E%3Cpath d='M32 23C38 29 42 31 49 31C57 31 62 29 68 23' stroke='%23b77aa9' stroke-width='1.08' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 76px;
  --romance-right-right: 28px;
  --romance-right-top: 24px;
  --romance-right-width: 98px;
}

.book-spread[data-style="romance"][data-decor^="orbit"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='128' height='112' viewBox='0 0 128 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='64' cy='56' rx='48' ry='24' transform='rotate(-18 64 56)' stroke='%23d99acb' stroke-width='1.35'/%3E%3Cellipse cx='64' cy='56' rx='29' ry='50' transform='rotate(33 64 56)' stroke='%23b77aa9' stroke-width='1.14'/%3E%3Ccircle cx='101' cy='34' r='3.2' fill='%23d99acb'/%3E%3Ccircle cx='28' cy='78' r='2.2' fill='%23b77aa9'/%3E%3Cpath d='M64 70C55 62 45 56 45 45C45 38 50 34 57 34C62 34 64 38 64 42C66 38 69 34 74 34C81 34 86 38 86 45C86 56 74 62 64 70Z' stroke='%23d99acb' stroke-width='1.18' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 112px;
  --romance-left-right: 22px;
  --romance-left-top: 24px;
  --romance-left-width: 128px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='116' height='58' viewBox='0 0 116 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 37C22 17 40 47 58 27C74 10 93 14 112 28' stroke='%23d99acb' stroke-width='1.45' stroke-linecap='round'/%3E%3Ccircle cx='25' cy='18' r='2' fill='%23b77aa9'/%3E%3Ccircle cx='91' cy='42' r='2.4' fill='%23d99acb'/%3E%3Cpath d='M55 47L59 51L63 47' stroke='%23b77aa9' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-right-bottom: 24px;
  --romance-right-height: 58px;
  --romance-right-width: 116px;
}

.book-spread[data-style="romance"][data-decor^="petals"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='128' height='104' viewBox='0 0 128 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29 18C41 23 47 35 45 49C31 49 20 41 17 28C19 22 23 19 29 18ZM91 11C101 20 102 33 96 44C83 38 77 27 81 15C84 13 87 11 91 11ZM63 61C75 67 81 80 78 95C64 95 52 86 49 73C52 66 56 62 63 61Z' stroke='%23d99acb' stroke-width='1.28' stroke-linejoin='round'/%3E%3Cpath d='M12 90C40 77 76 75 116 82' stroke='%23b77aa9' stroke-width='1.12' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-left-height: 104px;
  --romance-left-right: 28px;
  --romance-left-width: 128px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='102' height='82' viewBox='0 0 102 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 72C54 48 64 28 83 8' stroke='%23b77aa9' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M62 35C52 33 46 26 45 17C55 16 62 22 65 31M65 38C75 39 82 45 85 55C75 55 68 50 64 43M30 54C40 54 47 60 50 70C40 70 33 65 29 59' stroke='%23d99acb' stroke-width='1.08' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 82px;
  --romance-right-left: 30px;
  --romance-right-right: auto;
  --romance-right-top: 26px;
  --romance-right-width: 102px;
}

.book-spread[data-style="romance"][data-decor^="garland"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='154' height='82' viewBox='0 0 154 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 26C32 68 113 68 147 24' stroke='%23b77aa9' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M31 47C25 39 25 29 32 22C41 27 43 37 37 46M64 58C57 51 57 40 64 33C73 39 75 49 69 57M103 56C98 47 101 37 110 32C116 41 115 51 107 57M127 42C123 33 126 24 135 20C140 29 139 38 131 44' stroke='%23d99acb' stroke-width='1.12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 82px;
  --romance-left-left: 22px;
  --romance-left-right: auto;
  --romance-left-top: 20px;
  --romance-left-width: 154px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='132' height='74' viewBox='0 0 132 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 60C42 46 69 47 112 18' stroke='%23b77aa9' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M39 47C31 44 26 38 25 29C34 29 42 34 45 43M78 32C68 31 62 24 62 14C72 14 80 20 83 28M92 26C101 26 109 31 113 40C103 40 96 36 91 30' stroke='%23d99acb' stroke-width='1.08' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: 28px;
  --romance-right-height: 74px;
  --romance-right-width: 132px;
}

.book-spread[data-style="romance"][data-decor^="rings"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='122' height='72' viewBox='0 0 122 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='48' cy='38' r='26' stroke='%23d99acb' stroke-width='1.65'/%3E%3Ccircle cx='74' cy='38' r='26' stroke='%23b77aa9' stroke-width='1.35'/%3E%3Cpath d='M41 13L48 5L55 13M67 13L74 5L81 13' stroke='%23d99acb' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 24px;
  --romance-left-height: 72px;
  --romance-left-right: 30px;
  --romance-left-width: 122px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='116' height='82' viewBox='0 0 116 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M58 73C44 60 25 50 25 34C25 24 33 18 43 18C50 18 55 23 58 30C61 23 66 18 73 18C83 18 91 24 91 34C91 50 72 60 58 73Z' stroke='%23d99acb' stroke-width='1.28' stroke-linejoin='round'/%3E%3Cpath d='M18 20C33 11 48 11 58 23M58 23C68 11 84 11 99 20' stroke='%23b77aa9' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 82px;
  --romance-right-right: 30px;
  --romance-right-top: 24px;
  --romance-right-width: 116px;
}

.book-spread[data-style="romance"][data-decor^="rose-corner"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='122' height='120' viewBox='0 0 122 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 103C43 81 59 56 75 18' stroke='%23b77aa9' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M76 18C68 12 70 3 78 1C91 6 95 19 86 30C81 31 78 28 76 18Z' stroke='%23d99acb' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M50 66C37 64 28 55 26 42C40 42 51 49 56 61M62 51C78 51 90 60 97 74C80 75 68 69 60 57' stroke='%23d99acb' stroke-width='1.06' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 20px;
  --romance-left-height: 120px;
  --romance-left-left: 24px;
  --romance-left-right: auto;
  --romance-left-width: 122px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='106' height='98' viewBox='0 0 106 98' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 15C27 34 77 34 93 15M22 32C35 48 68 48 82 32M34 49C44 60 58 60 68 49' stroke='%23b77aa9' stroke-width='1.18' stroke-linecap='round'/%3E%3Cpath d='M54 86C45 77 34 71 34 60C34 53 39 49 46 49C51 49 54 53 54 57C56 53 60 49 65 49C72 49 77 53 77 60C77 71 65 77 54 86Z' stroke='%23d99acb' stroke-width='1.15' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 98px;
  --romance-right-right: 24px;
  --romance-right-top: 22px;
  --romance-right-width: 106px;
}

.book-spread[data-style="romance"][data-decor^="botanical"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='118' height='154' viewBox='0 0 118 154' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 148C31 104 57 61 100 10' stroke='%23b77aa9' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M35 107C23 102 17 92 21 80C34 84 40 94 35 107ZM58 72C48 66 45 55 52 44C63 52 66 63 58 72ZM72 55C88 53 100 63 104 78C88 78 76 69 72 55ZM85 32C76 26 73 17 78 8C89 15 92 24 85 32Z' stroke='%23d99acb' stroke-width='1.12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='112' height='78' viewBox='0 0 112 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 62C33 51 57 49 99 18' stroke='%23b77aa9' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M34 48C25 44 21 36 25 27C35 31 39 39 34 48ZM55 40C47 35 45 27 50 19C60 25 62 33 55 40ZM72 31C84 29 93 36 98 48C85 48 76 42 72 31Z' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.book-spread[data-style="romance"][data-decor^="ribbon"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='154' height='48' viewBox='0 0 154 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 31C42 13 76 14 107 28C123 35 137 34 148 24' stroke='%23d99acb' stroke-width='1.55' stroke-linecap='round'/%3E%3Cpath d='M69 24C58 20 53 12 58 4C70 9 75 17 69 24ZM88 25C101 20 112 24 119 35C105 37 95 33 88 25Z' stroke='%23b77aa9' stroke-width='1.08' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 8px;
  --romance-left-height: 48px;
  --romance-left-width: 154px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='104' height='70' viewBox='0 0 104 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 54C35 39 60 38 92 18' stroke='%23b77aa9' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M38 38C29 34 25 27 29 18C39 22 43 30 38 38ZM61 31C72 28 81 32 87 42C76 44 67 40 61 31Z' stroke='%23d99acb' stroke-width='1.04' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.book-spread[data-style="romance"][data-decor^="garland"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='154' height='82' viewBox='0 0 154 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 25C34 62 116 64 146 22' stroke='%23b77aa9' stroke-width='1.32' stroke-linecap='round'/%3E%3Cpath d='M33 47C23 42 19 32 23 22C35 27 39 37 33 47ZM66 58C56 52 54 40 61 31C72 39 75 50 66 58ZM103 57C112 47 124 45 134 52C126 62 114 64 103 57Z' stroke='%23d99acb' stroke-width='1.08' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='132' height='74' viewBox='0 0 132 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 60C43 47 70 46 114 18' stroke='%23b77aa9' stroke-width='1.28' stroke-linecap='round'/%3E%3Cpath d='M41 47C31 43 27 35 30 26C41 30 46 38 41 47ZM80 33C70 28 68 19 73 10C84 17 87 26 80 33ZM95 28C107 27 116 34 121 45C108 46 99 39 95 28Z' stroke='%23d99acb' stroke-width='1.04' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.book-spread[data-style="romance"][data-decor^="rose-corner"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='122' height='120' viewBox='0 0 122 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 104C43 82 59 56 76 16' stroke='%23b77aa9' stroke-width='1.32' stroke-linecap='round'/%3E%3Cpath d='M76 16C69 10 71 3 79 2C90 6 93 18 86 27C81 28 78 25 76 16ZM51 66C39 61 34 51 38 40C51 44 57 55 51 66ZM64 50C79 48 91 57 96 70C80 71 69 64 64 50Z' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='106' height='98' viewBox='0 0 106 98' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 18C34 36 72 36 91 18M26 36C41 50 65 50 80 36' stroke='%23b77aa9' stroke-width='1.12' stroke-linecap='round'/%3E%3Cpath d='M54 84C44 75 36 68 36 59C36 52 41 48 47 48C52 48 54 52 54 56C57 52 60 48 65 48C72 48 76 52 76 59C76 68 65 75 54 84Z' stroke='%23d99acb' stroke-width='1.12' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.book-spread[data-style="romance"][data-decor$="-b"] {
  --romance-left-opacity: 0.58;
  --romance-left-transform: translateX(-8px) scaleX(-1);
  --romance-right-opacity: 0.62;
  --romance-right-transform: translateX(7px);
}

.book-spread[data-style="romance"][data-decor$="-c"] {
  --romance-left-opacity: 0.6;
  --romance-left-transform: translateY(-6px) rotate(-2deg);
  --romance-right-opacity: 0.58;
  --romance-right-transform: translateY(5px) scaleX(-1);
}

.book-spread[data-style="romance"] .slot-large {
  filter: grayscale(1) contrast(1.06);
}

.book-spread[data-style="romance"] .photo-slot {
  border-width: 1px;
  border-color: rgba(198, 90, 166, 0.24);
  box-shadow: 0 12px 28px rgba(92, 46, 73, 0.12);
}

.book-spread[data-style="romance"] .slot-wide {
  border-radius: 22px 22px 4px 4px;
}

.book-spread[data-style="romance"] .page-title {
  text-transform: uppercase;
}

.photo-slot[data-shape="heart"],
.thumb-img[data-shape="heart"] {
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='100' height='92' viewBox='0 0 100 92' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 86C32 69 10 55 10 31C10 17 20 8 34 8C42 8 47 12 50 19C53 12 58 8 66 8C80 8 90 17 90 31C90 55 68 69 50 86Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='100' height='92' viewBox='0 0 100 92' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 86C32 69 10 55 10 31C10 17 20 8 34 8C42 8 47 12 50 19C53 12 58 8 66 8C80 8 90 17 90 31C90 55 68 69 50 86Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.photo-slot[data-shape="oval"],
.thumb-img[data-shape="oval"] {
  border-radius: 50%;
}

.photo-slot[data-shape="pill"],
.thumb-img[data-shape="pill"] {
  border-radius: 999px;
}

.photo-slot[data-shape="arch"],
.thumb-img[data-shape="arch"] {
  border-radius: 999px 999px 16px 16px;
}

.photo-slot[data-shape="ribbon"],
.thumb-img[data-shape="ribbon"] {
  border-radius: 26px 26px 5px 5px;
}

.photo-slot[data-shape="soft"],
.thumb-img[data-shape="soft"] {
  border-radius: 14px;
}

.photo-slot[data-shape="tall"],
.thumb-img[data-shape="tall"] {
  border-radius: 999px 999px 20px 20px;
}

.book-spread[data-style="bright"] .photo-slot[data-shape="tilt-a"],
body[data-book-style="bright"] .thumb-img[data-shape="tilt-a"] {
  border-radius: 4px 20px 6px 16px;
}

.book-spread[data-style="bright"] .photo-slot[data-shape="tilt-b"],
body[data-book-style="bright"] .thumb-img[data-shape="tilt-b"] {
  border-radius: 18px 4px 16px 6px;
}

.book-spread[data-style="folk"] .book-page {
  background:
    linear-gradient(rgba(199, 53, 53, 0.035), rgba(31, 106, 165, 0.025)),
    var(--book-page-bg);
}

.book-spread[data-style="folk"] .book-page::before {
  inset: 14px;
  border-color: rgba(199, 53, 53, 0.28);
  background:
    linear-gradient(90deg, rgba(199, 53, 53, 0.22) 0 8px, transparent 8px calc(100% - 8px), rgba(31, 106, 165, 0.2) calc(100% - 8px)),
    linear-gradient(0deg, rgba(199, 53, 53, 0.16) 0 8px, transparent 8px calc(100% - 8px), rgba(31, 106, 165, 0.18) calc(100% - 8px));
  opacity: 0.62;
}

.book-spread[data-style="folk"] .book-page-left::after {
  right: 24px;
  bottom: 20px;
  width: 116px;
  height: 68px;
  background: url("data:image/svg+xml,%3Csvg width='116' height='68' viewBox='0 0 116 68' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M58 60C44 47 18 32 21 15C23 4 39 0 50 12C54 16 56 20 58 23C60 20 63 16 66 12C77 0 93 4 95 15C98 32 72 47 58 60Z' stroke='%23c73535' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 54C21 42 30 42 40 54M76 54C88 42 97 42 108 54' stroke='%231f6aa5' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.62;
}

.book-spread[data-style="folk"] .book-page-right::after {
  top: 22px;
  right: 24px;
  width: 88px;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg width='88' height='60' viewBox='0 0 88 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M44 8C50 20 58 28 75 30C59 34 50 40 44 52C38 40 29 34 13 30C30 28 38 20 44 8Z' stroke='%231f6aa5' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M25 16C31 22 35 24 44 24C53 24 57 22 63 16' stroke='%23c73535' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.5;
}

.book-spread[data-style="folk"] .photo-slot {
  border-width: 2px;
  border-color: rgba(199, 53, 53, 0.42);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(113, 57, 36, 0.12);
}

.book-spread[data-style="folk"] .page-title {
  text-transform: uppercase;
}

.book-spread[data-style="vintage"] .book-page {
  background:
    linear-gradient(rgba(125, 67, 29, 0.06), rgba(125, 67, 29, 0.06)),
    var(--book-page-bg);
}

.book-spread[data-style="vintage"] .book-page::before {
  inset: 18px;
  border-color: rgba(125, 67, 29, 0.22);
}

.book-spread[data-style="vintage"] .book-page-left::after,
.book-spread[data-style="vintage"] .book-page-right::after {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(125, 67, 29, 0.045) 0 1px, transparent 1px 42px),
    linear-gradient(0deg, rgba(125, 67, 29, 0.035) 0 1px, transparent 1px 36px);
  opacity: 0.68;
}

.book-spread[data-style="vintage"] .photo-slot {
  border-width: 1px;
  border-color: rgba(125, 67, 29, 0.28);
  box-shadow:
    0 0 0 4px rgba(248, 237, 215, 0.72),
    0 12px 24px rgba(77, 43, 19, 0.14);
}

.book-spread[data-style="vintage"] .photo-slot:not(.is-empty)::before {
  position: absolute;
  z-index: 2;
  top: -2px;
  left: 50%;
  width: 44px;
  height: 10px;
  background: rgba(199, 166, 118, 0.38);
  content: "";
  transform: translateX(-50%) rotate(-3deg);
}

.book-spread[data-style="vintage"] .slot-large {
  transform: rotate(-1.2deg);
}

.book-spread[data-style="vintage"] .slot-wide {
  transform: rotate(0.9deg);
}

.book-spread[data-style="vintage"] .slot-small-left {
  transform: rotate(-2deg);
}

.book-spread[data-style="vintage"] .slot-small-right {
  transform: rotate(1.4deg);
}

.book-spread[data-style="vintage"] .page-title {
  text-transform: uppercase;
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor] {
  --thumb-decor-art: none;
  --thumb-decor-border: 0;
  --thumb-decor-bottom: 8%;
  --thumb-decor-color: rgba(25, 21, 18, 0.24);
  --thumb-decor-height: 24%;
  --thumb-decor-left: auto;
  --thumb-decor-opacity: 0.52;
  --thumb-decor-right: 8%;
  --thumb-decor-top: auto;
  --thumb-decor-transform: none;
  --thumb-decor-width: 35%;
}

body[data-book-style="mono"] .spread-thumb-preview[data-decor] {
  --thumb-decor-color: rgba(255, 255, 255, 0.42);
}

body[data-book-style="bright"] .spread-thumb-preview[data-decor] {
  --thumb-decor-color: rgba(231, 125, 40, 0.5);
}

body[data-book-style="childhood"] .spread-thumb-preview[data-decor] {
  --thumb-decor-color: rgba(197, 187, 115, 0.58);
}

body[data-book-style="folk"] .spread-thumb-preview[data-decor] {
  --thumb-decor-color: rgba(199, 53, 53, 0.5);
}

body[data-book-style="vintage"] .spread-thumb-preview[data-decor] {
  --thumb-decor-color: rgba(125, 67, 29, 0.36);
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="rule"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="dashes"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="wave"] {
  --thumb-decor-art: linear-gradient(90deg, transparent, var(--thumb-decor-color), transparent);
  --thumb-decor-height: 1px;
  --thumb-decor-width: 44%;
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="corner"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="frame"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="crest"] {
  --thumb-decor-art: transparent;
  --thumb-decor-border: 1px solid var(--thumb-decor-color);
  --thumb-decor-height: 24%;
  --thumb-decor-width: 28%;
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="folio"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="stamp"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="tape"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="ledger"] {
  --thumb-decor-art: repeating-linear-gradient(0deg, var(--thumb-decor-color) 0 1px, transparent 1px 5px);
  --thumb-decor-height: 20%;
  --thumb-decor-width: 30%;
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="ticks"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="bars"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="blocks"] {
  --thumb-decor-art: repeating-linear-gradient(90deg, var(--thumb-decor-color) 0 2px, transparent 2px 7px);
  --thumb-decor-height: 14%;
  --thumb-decor-width: 34%;
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="sun"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="spark"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="stars"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="flower"] {
  --thumb-decor-art: radial-gradient(circle at 22% 28%, var(--thumb-decor-color) 0 2px, transparent 2.5px), radial-gradient(circle at 62% 46%, var(--thumb-decor-color) 0 2px, transparent 2.5px), radial-gradient(circle at 42% 78%, var(--thumb-decor-color) 0 1.5px, transparent 2px);
  --thumb-decor-height: 28%;
  --thumb-decor-width: 32%;
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="kite"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="sprout"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="moon"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="cloud"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="heart"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="diamond"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="arc"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="confetti"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="offset"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="quiet"],
body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor*="grid"] {
  --thumb-decor-art: radial-gradient(circle at 30% 40%, var(--thumb-decor-color) 0 1.5px, transparent 2px), linear-gradient(135deg, transparent 42%, var(--thumb-decor-color) 43% 45%, transparent 46%);
  --thumb-decor-height: 25%;
  --thumb-decor-width: 34%;
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor$="-b"] {
  --thumb-decor-left: 8%;
  --thumb-decor-right: auto;
  --thumb-decor-transform: scaleX(-1);
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor$="-c"] {
  --thumb-decor-bottom: auto;
  --thumb-decor-top: 8%;
  --thumb-decor-transform: rotate(-4deg);
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor$="-d"] {
  --thumb-decor-bottom: auto;
  --thumb-decor-left: 9%;
  --thumb-decor-right: auto;
  --thumb-decor-top: 10%;
  --thumb-decor-transform: rotate(3deg);
}

body:not([data-book-style="romance"]) .spread-thumb-preview[data-decor] .thumb-page:first-child::after {
  position: absolute;
  z-index: 0;
  top: var(--thumb-decor-top);
  right: var(--thumb-decor-right);
  bottom: var(--thumb-decor-bottom);
  left: var(--thumb-decor-left);
  width: var(--thumb-decor-width);
  height: var(--thumb-decor-height);
  border: var(--thumb-decor-border);
  background: var(--thumb-decor-art) center / 100% 100% no-repeat;
  content: "";
  opacity: var(--thumb-decor-opacity);
  pointer-events: none;
  transform: var(--thumb-decor-transform);
  transform-origin: center;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="botanical"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='66' height='76' viewBox='0 0 66 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 70C31 48 42 28 56 8' stroke='%23b77aa9' stroke-width='1.28' stroke-linecap='round'/%3E%3Cpath d='M32 47C23 44 19 37 21 29C30 32 35 39 32 47ZM43 28C35 24 33 17 38 10C47 15 49 23 43 28ZM44 36C53 36 59 42 61 51C52 51 46 45 44 36Z' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="ribbon"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='76' height='42' viewBox='0 0 76 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38 22C25 7 11 7 6 20C14 29 27 28 38 22ZM38 22C51 7 65 7 70 20C62 29 49 28 38 22Z' stroke='%23d99acb' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M31 22C35 18 41 18 45 22C41 26 35 26 31 22ZM23 33C33 29 43 29 54 33' stroke='%23b77aa9' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 21%;
  --romance-thumb-width: 34%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="garland"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='86' height='34' viewBox='0 0 86 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10C22 26 63 26 79 10' stroke='%23b77aa9' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='23' cy='22' r='2.4' stroke='%23d99acb' stroke-width='1.05'/%3E%3Ccircle cx='43' cy='26' r='2.4' stroke='%23d99acb' stroke-width='1.05'/%3E%3Ccircle cx='63' cy='22' r='2.4' stroke='%23d99acb' stroke-width='1.05'/%3E%3C/svg%3E");
  --romance-thumb-height: 18%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="petals"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='72' height='56' viewBox='0 0 72 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 9C34 13 39 23 37 34C26 33 18 26 16 16C18 12 20 10 24 9ZM50 6C58 14 59 25 53 33C44 28 41 18 45 9C47 8 48 7 50 6ZM38 34C47 38 51 47 48 54C39 54 32 48 30 39C32 36 35 34 38 34Z' stroke='%23d99acb' stroke-width='1.12' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 27%;
}

.book-spread:not([data-style="romance"]) {
  --spread-decor-left-art: none;
  --spread-decor-left-bg-size: 100% 100%;
  --spread-decor-left-bottom: 24px;
  --spread-decor-left-height: 72px;
  --spread-decor-left-left: auto;
  --spread-decor-left-opacity: 0.55;
  --spread-decor-left-right: 26px;
  --spread-decor-left-top: auto;
  --spread-decor-left-transform: none;
  --spread-decor-left-width: 112px;
  --spread-decor-right-art: none;
  --spread-decor-right-bg-size: 100% 100%;
  --spread-decor-right-bottom: 24px;
  --spread-decor-right-height: 72px;
  --spread-decor-right-left: auto;
  --spread-decor-right-opacity: 0.55;
  --spread-decor-right-right: 26px;
  --spread-decor-right-top: auto;
  --spread-decor-right-transform: none;
  --spread-decor-right-width: 112px;
}

.book-spread:not([data-style="romance"]) .book-page-left::after {
  top: var(--spread-decor-left-top);
  right: var(--spread-decor-left-right);
  bottom: var(--spread-decor-left-bottom);
  left: var(--spread-decor-left-left);
  width: var(--spread-decor-left-width);
  height: var(--spread-decor-left-height);
  border: 0;
  border-radius: 0;
  background: var(--spread-decor-left-art);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spread-decor-left-bg-size);
  opacity: var(--spread-decor-left-opacity);
  transform: var(--spread-decor-left-transform);
  transform-origin: center;
}

.book-spread:not([data-style="romance"]) .book-page-right::after {
  top: var(--spread-decor-right-top);
  right: var(--spread-decor-right-right);
  bottom: var(--spread-decor-right-bottom);
  left: var(--spread-decor-right-left);
  width: var(--spread-decor-right-width);
  height: var(--spread-decor-right-height);
  border: 0;
  border-radius: 0;
  background: var(--spread-decor-right-art);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spread-decor-right-bg-size);
  opacity: var(--spread-decor-right-opacity);
  transform: var(--spread-decor-right-transform);
  transform-origin: center;
}

.book-spread[data-style="minimal"][data-decor^="minimal-rule"] {
  --spread-decor-left-art: linear-gradient(180deg, rgba(25, 21, 18, 0), rgba(25, 21, 18, 0.18), rgba(25, 21, 18, 0));
  --spread-decor-left-height: 108px;
  --spread-decor-left-left: 31px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 32px;
  --spread-decor-left-width: 1px;
  --spread-decor-right-art: linear-gradient(90deg, rgba(25, 21, 18, 0), rgba(25, 21, 18, 0.2), rgba(25, 21, 18, 0));
  --spread-decor-right-height: 1px;
  --spread-decor-right-right: 34px;
  --spread-decor-right-width: 96px;
}

.book-spread[data-style="minimal"][data-decor^="minimal-corner"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='88' height='88' viewBox='0 0 88 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 52V14H52M36 74H74V36' stroke='%23191512' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 88px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 22px;
  --spread-decor-left-width: 88px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 42V12H42M30 58H58V30' stroke='%23191512' stroke-opacity='.14' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 70px;
  --spread-decor-right-right: 28px;
  --spread-decor-right-top: 26px;
  --spread-decor-right-width: 70px;
}

.book-spread[data-style="minimal"][data-decor^="minimal-folio"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='86' height='32' viewBox='0 0 86 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 16H36M50 16H79M43 10V22' stroke='%23191512' stroke-opacity='.18' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 32px;
  --spread-decor-left-left: 28px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 28px;
  --spread-decor-left-width: 86px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='92' height='44' viewBox='0 0 92 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='18' y='9' width='56' height='26' rx='0' stroke='%23191512' stroke-opacity='.14' stroke-width='1'/%3E%3Cpath d='M29 20H63M29 27H55' stroke='%23191512' stroke-opacity='.16' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 44px;
  --spread-decor-right-width: 92px;
}

.book-spread[data-style="minimal"][data-decor^="minimal-ticks"] {
  --spread-decor-left-art: repeating-linear-gradient(90deg, rgba(25, 21, 18, 0.18) 0 1px, transparent 1px 12px);
  --spread-decor-left-height: 12px;
  --spread-decor-left-left: 29px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 34px;
  --spread-decor-left-width: 112px;
  --spread-decor-right-art: repeating-linear-gradient(90deg, rgba(25, 21, 18, 0.16) 0 1px, transparent 1px 12px);
  --spread-decor-right-height: 12px;
  --spread-decor-right-right: 32px;
  --spread-decor-right-width: 96px;
}

.book-spread[data-style="minimal"][data-decor^="minimal-inner-frame"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='18' y='18' width='84' height='84' stroke='%23191512' stroke-opacity='.12' stroke-width='1'/%3E%3Cpath d='M18 39H38M82 18V38M102 82H82M38 102V82' stroke='%23191512' stroke-opacity='.18' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 120px;
  --spread-decor-left-left: 18px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 18px;
  --spread-decor-left-width: 120px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='14' y='14' width='68' height='68' stroke='%23191512' stroke-opacity='.12' stroke-width='1'/%3E%3Cpath d='M14 30H30M66 14V30M82 66H66M30 82V66' stroke='%23191512' stroke-opacity='.18' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 96px;
  --spread-decor-right-right: 22px;
  --spread-decor-right-top: 22px;
  --spread-decor-right-width: 96px;
}

.book-spread[data-style="minimal"][data-decor^="minimal-quiet"] {
  --spread-decor-left-art: radial-gradient(circle, rgba(25, 21, 18, 0.18) 0 2px, transparent 2.5px);
  --spread-decor-left-height: 20px;
  --spread-decor-left-left: 32px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 31px;
  --spread-decor-left-width: 20px;
  --spread-decor-right-art: linear-gradient(90deg, rgba(25, 21, 18, 0.18), transparent);
  --spread-decor-right-height: 1px;
  --spread-decor-right-right: 36px;
  --spread-decor-right-width: 70px;
}

.book-spread[data-style="mono"][data-decor^="mono-dashes"] {
  --spread-decor-left-art: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 16px, transparent 16px 25px);
  --spread-decor-left-height: 1px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: 22px;
  --spread-decor-left-width: auto;
  --spread-decor-right-art: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 16px, transparent 16px 25px);
  --spread-decor-right-height: 1px;
  --spread-decor-right-left: 22px;
  --spread-decor-right-right: 22px;
  --spread-decor-right-width: auto;
}

.book-spread[data-style="mono"][data-decor^="mono-bracket"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M62 12H32V84H62M72 28H46M72 68H46' stroke='white' stroke-opacity='.28' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 96px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 96px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='82' height='82' viewBox='0 0 82 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 10H55V72H25M17 25H43M17 57H43' stroke='white' stroke-opacity='.25' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 82px;
  --spread-decor-right-right: 24px;
  --spread-decor-right-top: 26px;
  --spread-decor-right-width: 82px;
}

.book-spread[data-style="mono"][data-decor^="mono-ledger"] {
  --spread-decor-left-art: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 13px);
  --spread-decor-left-height: 96px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 86px;
  --spread-decor-right-art: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.24) 0 1px, transparent 1px 13px);
  --spread-decor-right-height: 78px;
  --spread-decor-right-right: 24px;
  --spread-decor-right-width: 92px;
}

.book-spread[data-style="mono"][data-decor^="mono-bars"] {
  --spread-decor-left-art: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.32) 0 2px, transparent 2px 10px);
  --spread-decor-left-height: 30px;
  --spread-decor-left-left: 28px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 28px;
  --spread-decor-left-width: 110px;
  --spread-decor-right-art: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 2px, transparent 2px 10px);
  --spread-decor-right-height: 24px;
  --spread-decor-right-right: 28px;
  --spread-decor-right-width: 98px;
}

.book-spread[data-style="mono"][data-decor^="mono-offset"] {
  --spread-decor-left-art: linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.3) 49% 51%, transparent 52%);
  --spread-decor-left-height: 92px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 92px;
  --spread-decor-right-art: linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.25) 49% 51%, transparent 52%);
  --spread-decor-right-height: 84px;
  --spread-decor-right-right: 24px;
  --spread-decor-right-width: 84px;
}

.book-spread[data-style="mono"][data-decor^="mono-frame"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='116' height='116' viewBox='0 0 116 116' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='14' y='14' width='88' height='88' stroke='white' stroke-opacity='.23' stroke-width='1.2'/%3E%3Cpath d='M14 36H36M80 14V36M102 80H80M36 102V80' stroke='white' stroke-opacity='.32' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 116px;
  --spread-decor-left-left: 20px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 20px;
  --spread-decor-left-width: 116px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='94' height='94' viewBox='0 0 94 94' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='12' y='12' width='70' height='70' stroke='white' stroke-opacity='.22' stroke-width='1.1'/%3E%3Cpath d='M12 28H28M66 12V28M82 66H66M28 82V66' stroke='white' stroke-opacity='.3' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 94px;
  --spread-decor-right-right: 22px;
  --spread-decor-right-top: 22px;
  --spread-decor-right-width: 94px;
}

.book-spread[data-style="bright"][data-decor^="bright-sun"] {
  --spread-decor-left-art: radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(231, 125, 40, 0.4) 47% 49%, transparent 50%), radial-gradient(circle at 50% 50%, transparent 0 64%, rgba(47, 139, 143, 0.28) 65% 67%, transparent 68%);
  --spread-decor-left-height: 156px;
  --spread-decor-left-right: -48px;
  --spread-decor-left-top: -58px;
  --spread-decor-left-width: 156px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='116' height='54' viewBox='0 0 116 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 40C28 15 50 47 70 23C85 5 101 12 108 25' stroke='%23e77d28' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M12 48C36 31 55 50 80 32C94 22 104 24 111 34' stroke='%232f8b8f' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 54px;
  --spread-decor-right-width: 116px;
}

.book-spread[data-style="bright"][data-decor^="bright-wave"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='130' height='46' viewBox='0 0 130 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 30C25 8 48 38 68 20C88 2 108 11 125 27' stroke='%232f8b8f' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M10 40C34 24 54 43 78 27C96 15 112 18 122 32' stroke='%23e77d28' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 46px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 28px;
  --spread-decor-left-width: 130px;
  --spread-decor-right-art: radial-gradient(circle at 20% 35%, rgba(231, 125, 40, 0.55) 0 4px, transparent 4.5px), radial-gradient(circle at 55% 68%, rgba(47, 139, 143, 0.42) 0 3px, transparent 3.5px), radial-gradient(circle at 82% 28%, rgba(231, 125, 40, 0.4) 0 2.5px, transparent 3px);
  --spread-decor-right-height: 84px;
  --spread-decor-right-width: 112px;
}

.book-spread[data-style="bright"][data-decor^="bright-confetti"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='126' height='92' viewBox='0 0 126 92' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='22' cy='22' r='4' fill='%23e77d28' fill-opacity='.5'/%3E%3Ccircle cx='78' cy='16' r='3' fill='%232f8b8f' fill-opacity='.45'/%3E%3Ccircle cx='104' cy='52' r='4' fill='%23e77d28' fill-opacity='.38'/%3E%3Cpath d='M40 54L58 42M64 74L82 68M18 72L32 78' stroke='%232f8b8f' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 92px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 22px;
  --spread-decor-left-width: 126px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='26' r='3' fill='%23e77d28' fill-opacity='.5'/%3E%3Ccircle cx='62' cy='22' r='2.5' fill='%232f8b8f' fill-opacity='.5'/%3E%3Cpath d='M26 62L42 50M54 74L72 66' stroke='%23e77d28' stroke-opacity='.45' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 96px;
  --spread-decor-right-right: 24px;
  --spread-decor-right-top: 24px;
  --spread-decor-right-width: 96px;
}

.book-spread[data-style="bright"][data-decor^="bright-rays"] {
  --spread-decor-left-art: repeating-conic-gradient(from 12deg, rgba(231, 125, 40, 0.34) 0 5deg, transparent 5deg 18deg);
  --spread-decor-left-height: 150px;
  --spread-decor-left-left: -55px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: -55px;
  --spread-decor-left-width: 150px;
  --spread-decor-right-art: linear-gradient(90deg, rgba(231, 125, 40, 0.42), transparent), linear-gradient(135deg, rgba(47, 139, 143, 0.24), transparent 55%);
  --spread-decor-right-height: 48px;
  --spread-decor-right-right: 28px;
  --spread-decor-right-width: 120px;
}

.book-spread[data-style="bright"][data-decor^="bright-arc"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='136' height='98' viewBox='0 0 136 98' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 82C34 27 87 5 122 30' stroke='%23e77d28' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M27 77C46 43 82 28 112 42' stroke='%232f8b8f' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 98px;
  --spread-decor-left-left: 18px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 26px;
  --spread-decor-left-width: 136px;
  --spread-decor-right-art: radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(47, 139, 143, 0.32) 55% 57%, transparent 58%);
  --spread-decor-right-height: 118px;
  --spread-decor-right-width: 118px;
}

.book-spread[data-style="bright"][data-decor^="bright-spark"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56 12C63 35 76 49 100 56C76 63 63 77 56 100C49 77 35 63 12 56C35 49 49 35 56 12Z' stroke='%23e77d28' stroke-opacity='.48' stroke-width='1.5'/%3E%3Cpath d='M27 25L36 34M84 27L75 36M28 86L37 77M84 84L75 75' stroke='%232f8b8f' stroke-opacity='.42' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 112px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 112px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='86' height='86' viewBox='0 0 86 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43 9C48 27 58 38 77 43C58 48 48 59 43 77C38 59 27 48 9 43C27 38 38 27 43 9Z' stroke='%232f8b8f' stroke-opacity='.45' stroke-width='1.35'/%3E%3C/svg%3E");
  --spread-decor-right-height: 86px;
  --spread-decor-right-right: 28px;
  --spread-decor-right-top: 26px;
  --spread-decor-right-width: 86px;
}

.book-spread[data-style="childhood"][data-decor^="childhood-stars"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='150' height='120' viewBox='0 0 150 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 14L38 27L52 29L42 39L44 54L32 47L19 54L22 39L11 29L26 27Z' stroke='%23c5bb73' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M112 42L116 50L125 52L119 58L120 67L112 63L104 67L106 58L99 52L108 50Z' stroke='%23efbf6f' stroke-width='1.15' stroke-linejoin='round'/%3E%3Cpath d='M74 82L78 90L87 92L80 98L82 108L74 103L66 108L68 98L61 92L70 90Z' stroke='%23c5bb73' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 120px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 22px;
  --spread-decor-left-width: 150px;
  --spread-decor-right-art: radial-gradient(circle at 22% 35%, rgba(239, 191, 111, 0.48) 0 3px, transparent 3.5px), radial-gradient(circle at 65% 55%, rgba(197, 187, 115, 0.5) 0 2.5px, transparent 3px);
  --spread-decor-right-height: 92px;
  --spread-decor-right-width: 112px;
}

.book-spread[data-style="childhood"][data-decor^="childhood-kite"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='132' height='132' viewBox='0 0 132 132' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M62 13L101 52L62 91L23 52Z' stroke='%23efbf6f' stroke-width='1.35' stroke-linejoin='round'/%3E%3Cpath d='M62 13V91M23 52H101M62 91C54 104 44 111 31 114' stroke='%23c5bb73' stroke-width='1.12' stroke-linecap='round'/%3E%3Cpath d='M44 108L39 101M33 114L29 106' stroke='%23efbf6f' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 132px;
  --spread-decor-left-left: 18px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 18px;
  --spread-decor-left-width: 132px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='110' height='62' viewBox='0 0 110 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 38C24 18 43 47 60 27C75 10 91 16 103 30' stroke='%23efbf6f' stroke-width='1.18' stroke-linecap='round'/%3E%3Cpath d='M19 48L25 42M41 46L46 40M82 40L88 34' stroke='%23c5bb73' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 62px;
  --spread-decor-right-width: 110px;
}

.book-spread[data-style="childhood"][data-decor^="childhood-sprout"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56 96C56 68 56 43 56 20' stroke='%23c5bb73' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M55 53C39 52 28 42 25 27C42 28 53 38 55 53ZM58 70C74 70 85 60 88 45C72 45 61 55 58 70Z' stroke='%23efbf6f' stroke-width='1.16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 112px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 112px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='92' height='92' viewBox='0 0 92 92' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46 78V20' stroke='%23c5bb73' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M45 44C33 42 25 34 23 22C36 24 44 32 45 44ZM48 58C60 58 68 50 70 38C58 38 50 46 48 58Z' stroke='%23efbf6f' stroke-width='1.08' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 92px;
  --spread-decor-right-right: 28px;
  --spread-decor-right-top: 28px;
  --spread-decor-right-width: 92px;
}

.book-spread[data-style="childhood"][data-decor^="childhood-moon"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72 16C54 22 42 39 42 58C42 77 54 93 72 99C44 101 21 80 21 56C21 31 44 12 72 16Z' stroke='%23efbf6f' stroke-width='1.35' stroke-linejoin='round'/%3E%3Cpath d='M88 32L91 39L98 40L93 45L94 52L88 49L82 52L83 45L78 40L85 39Z' stroke='%23c5bb73' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 112px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 22px;
  --spread-decor-left-width: 112px;
  --spread-decor-right-art: radial-gradient(circle at 24% 35%, rgba(239, 191, 111, 0.5) 0 3px, transparent 3.5px), radial-gradient(circle at 70% 55%, rgba(197, 187, 115, 0.5) 0 2px, transparent 2.5px), radial-gradient(circle at 44% 80%, rgba(239, 191, 111, 0.38) 0 2.5px, transparent 3px);
  --spread-decor-right-height: 88px;
  --spread-decor-right-width: 104px;
}

.book-spread[data-style="childhood"][data-decor^="childhood-cloud"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='136' height='74' viewBox='0 0 136 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29 53H100C115 53 124 45 124 34C124 23 114 15 103 18C98 8 87 3 76 7C67 10 62 17 60 25C51 19 39 20 31 27C24 33 22 42 29 53Z' stroke='%23efbf6f' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M33 62H100' stroke='%23c5bb73' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 74px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 136px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='116' height='62' viewBox='0 0 116 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 43H86C99 43 106 36 106 27C106 18 98 12 88 14C83 7 74 4 65 7C57 10 52 15 51 22C43 17 33 18 26 24C20 29 18 36 22 43Z' stroke='%23efbf6f' stroke-width='1.15' stroke-linejoin='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 62px;
  --spread-decor-right-width: 116px;
}

.book-spread[data-style="childhood"][data-decor^="childhood-blocks"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='118' height='86' viewBox='0 0 118 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='12' y='42' width='28' height='28' rx='4' stroke='%23c5bb73' stroke-width='1.15'/%3E%3Crect x='45' y='24' width='28' height='28' rx='4' stroke='%23efbf6f' stroke-width='1.15'/%3E%3Crect x='78' y='42' width='28' height='28' rx='4' stroke='%23c5bb73' stroke-width='1.15'/%3E%3Cpath d='M24 56H30M55 38H63M90 56H96' stroke='%23efbf6f' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 86px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 118px;
  --spread-decor-right-art: repeating-linear-gradient(90deg, rgba(197, 187, 115, 0.42) 0 12px, transparent 12px 18px, rgba(239, 191, 111, 0.38) 18px 30px, transparent 30px 36px);
  --spread-decor-right-height: 26px;
  --spread-decor-right-width: 110px;
}

.book-spread[data-style="folk"][data-decor^="folk-heart"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='116' height='68' viewBox='0 0 116 68' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M58 60C44 47 18 32 21 15C23 4 39 0 50 12C54 16 56 20 58 23C60 20 63 16 66 12C77 0 93 4 95 15C98 32 72 47 58 60Z' stroke='%23c73535' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 54C21 42 30 42 40 54M76 54C88 42 97 42 108 54' stroke='%231f6aa5' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 68px;
  --spread-decor-left-width: 116px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='88' height='60' viewBox='0 0 88 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M44 8C50 20 58 28 75 30C59 34 50 40 44 52C38 40 29 34 13 30C30 28 38 20 44 8Z' stroke='%231f6aa5' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M25 16C31 22 35 24 44 24C53 24 57 22 63 16' stroke='%23c73535' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 60px;
  --spread-decor-right-right: 24px;
  --spread-decor-right-top: 22px;
  --spread-decor-right-width: 88px;
}

.book-spread[data-style="folk"][data-decor^="folk-diamond"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='116' height='116' viewBox='0 0 116 116' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M58 12L104 58L58 104L12 58Z' stroke='%23c73535' stroke-width='1.45'/%3E%3Cpath d='M58 31L85 58L58 85L31 58Z' stroke='%231f6aa5' stroke-width='1.25'/%3E%3Cpath d='M58 12V31M58 85V104M12 58H31M85 58H104' stroke='%23c73535' stroke-width='1.1'/%3E%3C/svg%3E");
  --spread-decor-left-height: 116px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 22px;
  --spread-decor-left-width: 116px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='92' height='92' viewBox='0 0 92 92' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46 10L82 46L46 82L10 46Z' stroke='%23c73535' stroke-width='1.35'/%3E%3Cpath d='M46 25L67 46L46 67L25 46Z' stroke='%231f6aa5' stroke-width='1.15'/%3E%3C/svg%3E");
  --spread-decor-right-height: 92px;
  --spread-decor-right-right: 24px;
  --spread-decor-right-top: 24px;
  --spread-decor-right-width: 92px;
}

.book-spread[data-style="folk"][data-decor^="folk-flower"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='116' height='116' viewBox='0 0 116 116' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='58' cy='58' r='8' stroke='%231f6aa5' stroke-width='1.3'/%3E%3Cpath d='M58 18C66 31 66 42 58 50C50 42 50 31 58 18ZM58 98C50 85 50 74 58 66C66 74 66 85 58 98ZM18 58C31 50 42 50 50 58C42 66 31 66 18 58ZM98 58C85 66 74 66 66 58C74 50 85 50 98 58Z' stroke='%23c73535' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 116px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 116px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='88' height='88' viewBox='0 0 88 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='44' cy='44' r='7' stroke='%231f6aa5' stroke-width='1.2'/%3E%3Cpath d='M44 11C51 22 51 32 44 38C37 32 37 22 44 11ZM44 77C37 66 37 56 44 50C51 56 51 66 44 77ZM11 44C22 37 32 37 38 44C32 51 22 51 11 44ZM77 44C66 51 56 51 50 44C56 37 66 37 77 44Z' stroke='%23c73535' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 88px;
  --spread-decor-right-right: 26px;
  --spread-decor-right-top: 24px;
  --spread-decor-right-width: 88px;
}

.book-spread[data-style="folk"][data-decor^="folk-wave"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='138' height='46' viewBox='0 0 138 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 26C20 10 35 10 49 26C63 42 78 42 92 26C106 10 121 10 132 24' stroke='%23c73535' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M20 34C31 24 42 24 53 34M86 34C97 24 108 24 119 34' stroke='%231f6aa5' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 46px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 138px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='118' height='38' viewBox='0 0 118 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 22C18 8 31 8 44 22C57 35 70 35 83 22C96 8 108 10 113 20' stroke='%23c73535' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M16 29C27 20 38 20 49 29M72 29C83 20 94 20 105 29' stroke='%231f6aa5' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 38px;
  --spread-decor-right-width: 118px;
}

.book-spread[data-style="folk"][data-decor^="folk-crest"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56 14C66 35 77 46 98 56C77 66 66 77 56 98C46 77 35 66 14 56C35 46 46 35 56 14Z' stroke='%231f6aa5' stroke-width='1.35'/%3E%3Cpath d='M38 28C44 37 50 42 56 42C62 42 68 37 74 28M38 84C44 75 50 70 56 70C62 70 68 75 74 84' stroke='%23c73535' stroke-width='1.12' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 112px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 112px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='88' height='88' viewBox='0 0 88 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M44 10C52 26 62 36 78 44C62 52 52 62 44 78C36 62 26 52 10 44C26 36 36 26 44 10Z' stroke='%231f6aa5' stroke-width='1.25'/%3E%3Cpath d='M30 22C35 30 40 34 44 34C49 34 54 30 58 22' stroke='%23c73535' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 88px;
  --spread-decor-right-right: 26px;
  --spread-decor-right-top: 24px;
  --spread-decor-right-width: 88px;
}

.book-spread[data-style="folk"][data-decor^="folk-corner"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='118' height='118' viewBox='0 0 118 118' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 82V18H82M35 65V35H65' stroke='%23c73535' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M82 18L98 34M65 35L78 48M18 82L34 98M35 65L48 78' stroke='%231f6aa5' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 118px;
  --spread-decor-left-left: 20px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 20px;
  --spread-decor-left-width: 118px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='92' height='92' viewBox='0 0 92 92' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 62V14H62M28 50V28H50' stroke='%23c73535' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M62 14L76 28M14 62L28 76' stroke='%231f6aa5' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 92px;
  --spread-decor-right-right: 24px;
  --spread-decor-right-top: 24px;
  --spread-decor-right-width: 92px;
}

.book-spread[data-style="vintage"][data-decor^="vintage-grid"] {
  --spread-decor-left-art: linear-gradient(90deg, rgba(125, 67, 29, 0.045) 0 1px, transparent 1px 42px), linear-gradient(0deg, rgba(125, 67, 29, 0.035) 0 1px, transparent 1px 36px);
  --spread-decor-left-bg-size: auto;
  --spread-decor-left-bottom: 0;
  --spread-decor-left-height: auto;
  --spread-decor-left-left: 0;
  --spread-decor-left-right: 0;
  --spread-decor-left-top: 0;
  --spread-decor-left-width: auto;
  --spread-decor-right-art: linear-gradient(90deg, rgba(125, 67, 29, 0.045) 0 1px, transparent 1px 42px), linear-gradient(0deg, rgba(125, 67, 29, 0.035) 0 1px, transparent 1px 36px);
  --spread-decor-right-bg-size: auto;
  --spread-decor-right-bottom: 0;
  --spread-decor-right-height: auto;
  --spread-decor-right-left: 0;
  --spread-decor-right-right: 0;
  --spread-decor-right-top: 0;
  --spread-decor-right-width: auto;
}

.book-spread[data-style="vintage"][data-decor^="vintage-stamp"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='116' height='88' viewBox='0 0 116 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='18' y='14' width='80' height='60' stroke='%237d431d' stroke-opacity='.26' stroke-width='1.3' stroke-dasharray='5 4'/%3E%3Cellipse cx='58' cy='44' rx='27' ry='16' stroke='%237d431d' stroke-opacity='.18' stroke-width='1.2'/%3E%3Cpath d='M35 44H81M43 53H73' stroke='%237d431d' stroke-opacity='.2' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 88px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 24px;
  --spread-decor-left-width: 116px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='94' height='72' viewBox='0 0 94 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='14' y='12' width='66' height='48' stroke='%237d431d' stroke-opacity='.24' stroke-width='1.2' stroke-dasharray='4 4'/%3E%3Cellipse cx='47' cy='36' rx='22' ry='13' stroke='%237d431d' stroke-opacity='.18' stroke-width='1.1'/%3E%3C/svg%3E");
  --spread-decor-right-height: 72px;
  --spread-decor-right-right: 26px;
  --spread-decor-right-top: 24px;
  --spread-decor-right-width: 94px;
}

.book-spread[data-style="vintage"][data-decor^="vintage-tape"] {
  --spread-decor-left-art: linear-gradient(90deg, rgba(199, 166, 118, 0.16), rgba(199, 166, 118, 0.4), rgba(199, 166, 118, 0.18));
  --spread-decor-left-height: 14px;
  --spread-decor-left-left: 26px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 30px;
  --spread-decor-left-transform: rotate(-4deg);
  --spread-decor-left-width: 98px;
  --spread-decor-right-art: linear-gradient(90deg, rgba(199, 166, 118, 0.16), rgba(199, 166, 118, 0.38), rgba(199, 166, 118, 0.18));
  --spread-decor-right-height: 14px;
  --spread-decor-right-right: 32px;
  --spread-decor-right-top: 34px;
  --spread-decor-right-transform: rotate(3deg);
  --spread-decor-right-width: 82px;
}

.book-spread[data-style="vintage"][data-decor^="vintage-folio"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='112' height='54' viewBox='0 0 112 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 27H47M65 27H98M56 16V38' stroke='%237d431d' stroke-opacity='.24' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M38 38C48 43 63 43 74 38' stroke='%237d431d' stroke-opacity='.18' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 54px;
  --spread-decor-left-left: 26px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 28px;
  --spread-decor-left-width: 112px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='92' height='46' viewBox='0 0 92 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 23H38M54 23H80M46 14V32' stroke='%237d431d' stroke-opacity='.23' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 46px;
  --spread-decor-right-width: 92px;
}

.book-spread[data-style="vintage"][data-decor^="vintage-rule"] {
  --spread-decor-left-art: linear-gradient(90deg, rgba(125, 67, 29, 0), rgba(125, 67, 29, 0.28), rgba(125, 67, 29, 0));
  --spread-decor-left-height: 1px;
  --spread-decor-left-left: 24px;
  --spread-decor-left-right: 24px;
  --spread-decor-left-width: auto;
  --spread-decor-right-art: repeating-linear-gradient(90deg, rgba(125, 67, 29, 0.24) 0 18px, transparent 18px 27px);
  --spread-decor-right-height: 1px;
  --spread-decor-right-right: 28px;
  --spread-decor-right-width: 108px;
}

.book-spread[data-style="vintage"][data-decor^="vintage-corner"] {
  --spread-decor-left-art: url("data:image/svg+xml,%3Csvg width='108' height='108' viewBox='0 0 108 108' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 72V18H72M34 88H88V34' stroke='%237d431d' stroke-opacity='.24' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M27 63V27H63' stroke='%237d431d' stroke-opacity='.16' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-left-height: 108px;
  --spread-decor-left-left: 22px;
  --spread-decor-left-right: auto;
  --spread-decor-left-top: 22px;
  --spread-decor-left-width: 108px;
  --spread-decor-right-art: url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 56V14H56M28 70H70V28' stroke='%237d431d' stroke-opacity='.22' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --spread-decor-right-height: 84px;
  --spread-decor-right-right: 24px;
  --spread-decor-right-top: 24px;
  --spread-decor-right-width: 84px;
}

.book-spread:not([data-style="romance"])[data-decor$="-b"] {
  --spread-decor-left-opacity: 0.48;
  --spread-decor-left-transform: translateX(-8px) scaleX(-1);
  --spread-decor-right-opacity: 0.62;
  --spread-decor-right-transform: translateX(8px);
}

.book-spread:not([data-style="romance"])[data-decor$="-c"] {
  --spread-decor-left-opacity: 0.58;
  --spread-decor-left-transform: translateY(7px) rotate(-2deg);
  --spread-decor-right-opacity: 0.5;
  --spread-decor-right-transform: translateY(-6px) scaleX(-1);
}

.book-spread:not([data-style="romance"])[data-decor$="-d"] {
  --spread-decor-left-opacity: 0.5;
  --spread-decor-left-transform: translate(7px, -5px) rotate(2deg);
  --spread-decor-right-opacity: 0.58;
  --spread-decor-right-transform: translate(-7px, 6px);
}

.book-spread[data-style="vintage"][data-decor^="vintage-grid"] {
  --spread-decor-left-transform: none;
  --spread-decor-right-transform: none;
}

.book-spread[data-style="romance"][data-decor^="botanical"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='118' height='154' viewBox='0 0 118 154' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 144C39 102 63 59 98 12' stroke='%23b77aa9' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M44 104C31 99 25 89 30 77C43 82 49 93 44 104ZM63 72C52 66 49 55 56 44C67 52 70 63 63 72ZM75 56C90 55 101 64 106 78C91 79 80 70 75 56ZM88 34C79 28 76 18 82 9C92 16 96 26 88 34Z' stroke='%23d99acb' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 154px;
  --romance-left-left: 22px;
  --romance-left-right: auto;
  --romance-left-top: 22px;
  --romance-left-width: 118px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='94' height='116' viewBox='0 0 94 116' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M66 106C61 75 50 43 25 10' stroke='%23b77aa9' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M57 74C67 71 73 63 72 53C61 55 55 63 57 74ZM45 47C55 43 59 34 55 24C45 30 41 39 45 47ZM39 55C28 55 20 63 17 74C29 74 37 67 39 55Z' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 116px;
  --romance-right-right: 24px;
  --romance-right-top: 24px;
  --romance-right-width: 94px;
}

.book-spread[data-style="romance"][data-decor^="ribbon"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='132' height='76' viewBox='0 0 132 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M66 39C43 12 19 11 10 34C25 50 49 50 66 39ZM66 39C89 12 113 11 122 34C107 50 83 50 66 39Z' stroke='%23d99acb' stroke-width='1.38' stroke-linejoin='round'/%3E%3Cpath d='M55 39C62 32 70 32 77 39C70 46 62 46 55 39ZM43 60C57 52 75 52 91 60' stroke='%23b77aa9' stroke-width='1.12' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 76px;
  --romance-left-left: 24px;
  --romance-left-opacity: 0.58;
  --romance-left-right: auto;
  --romance-left-top: 24px;
  --romance-left-width: 132px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='104' height='70' viewBox='0 0 104 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M52 10C59 24 70 33 92 36C71 40 59 49 52 62C45 49 33 40 12 36C34 33 45 24 52 10Z' stroke='%23d99acb' stroke-width='1.28' stroke-linejoin='round'/%3E%3Cpath d='M34 24C41 30 46 32 52 32C59 32 64 30 70 24' stroke='%23b77aa9' stroke-width='1.06' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 70px;
  --romance-right-right: 28px;
  --romance-right-top: 24px;
  --romance-right-width: 104px;
}

.book-spread[data-style="romance"][data-decor^="petals"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='126' height='110' viewBox='0 0 126 110' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 18C49 24 56 39 53 55C37 54 24 45 20 30C23 23 28 19 35 18ZM88 12C100 22 101 38 94 50C79 43 72 30 77 16C81 14 84 12 88 12ZM62 62C76 69 83 84 80 101C64 100 51 90 47 75C51 68 55 64 62 62Z' stroke='%23d99acb' stroke-width='1.22' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 110px;
  --romance-left-left: 24px;
  --romance-left-right: auto;
  --romance-left-top: 24px;
  --romance-left-width: 126px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='98' height='92' viewBox='0 0 98 92' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33 13C44 18 49 30 46 43C34 42 24 34 22 22C25 17 28 14 33 13ZM65 24C78 25 86 34 88 47C75 48 66 40 65 24ZM49 52C61 58 66 70 63 84C50 83 40 75 37 62C40 57 44 53 49 52Z' stroke='%23d99acb' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 92px;
  --romance-right-right: 24px;
  --romance-right-top: 26px;
  --romance-right-width: 98px;
}

.book-spread[data-style="romance"][data-decor^="garland"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='154' height='62' viewBox='0 0 154 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 18C38 52 115 52 144 18' stroke='%23b77aa9' stroke-width='1.32' stroke-linecap='round'/%3E%3Ccircle cx='39' cy='42' r='5' stroke='%23d99acb' stroke-width='1.08'/%3E%3Ccircle cx='77' cy='50' r='5' stroke='%23d99acb' stroke-width='1.08'/%3E%3Ccircle cx='115' cy='42' r='5' stroke='%23d99acb' stroke-width='1.08'/%3E%3Cpath d='M39 37V28M77 45V33M115 37V28' stroke='%23d99acb' stroke-width='1.02' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 62px;
  --romance-left-left: 24px;
  --romance-left-right: auto;
  --romance-left-top: 22px;
  --romance-left-width: 154px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='120' height='54' viewBox='0 0 120 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16C31 43 90 43 111 16' stroke='%23b77aa9' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='36' r='4' stroke='%23d99acb' stroke-width='1.02'/%3E%3Ccircle cx='60' cy='42' r='4' stroke='%23d99acb' stroke-width='1.02'/%3E%3Ccircle cx='86' cy='36' r='4' stroke='%23d99acb' stroke-width='1.02'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 54px;
  --romance-right-right: 24px;
  --romance-right-top: 24px;
  --romance-right-width: 120px;
}

.book-spread[data-style="romance"][data-decor^="rose-corner"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='122' height='120' viewBox='0 0 122 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 104C45 82 60 57 76 17' stroke='%23b77aa9' stroke-width='1.32' stroke-linecap='round'/%3E%3Cpath d='M76 17C69 11 71 4 79 2C90 6 93 18 86 27C81 29 78 25 76 17ZM52 66C40 61 35 52 39 41C52 45 58 56 52 66ZM65 51C79 49 91 57 96 70C81 71 70 64 65 51Z' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 120px;
  --romance-left-left: 24px;
  --romance-left-right: auto;
  --romance-left-top: 24px;
  --romance-left-width: 122px;
  --romance-right-bottom: auto;
  --romance-right-right: 24px;
  --romance-right-top: 22px;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-line"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='122' height='48' viewBox='0 0 122 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 23C26 36 62 18 83 27C101 35 112 32 120 22' stroke='%23d99acb' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M84 27C75 18 71 9 78 5C85 2 91 8 92 15C95 9 101 4 107 8C114 14 108 25 93 38C89 34 86 30 84 27Z' stroke='%23b77aa9' stroke-width='1.05' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 22%;
  --romance-thumb-right: 2%;
  --romance-thumb-width: 54%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-tail"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='124' height='46' viewBox='0 0 124 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 35C15 46 34 43 47 32C62 20 82 10 121 16' stroke='%23d99acb' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M47 32C37 13 19 7 10 20C15 32 31 35 47 32ZM47 32C58 15 52 3 39 4C28 7 27 20 47 32Z' stroke='%23d99acb' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 22%;
  --romance-thumb-left: 5%;
  --romance-thumb-right: auto;
  --romance-thumb-width: 56%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-loop"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='104' height='54' viewBox='0 0 104 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 38C26 18 47 42 58 28C68 16 58 7 47 16C39 24 47 35 61 31C77 27 88 19 101 28' stroke='%23d99acb' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M58 28C51 19 51 11 58 8C65 5 72 11 72 19C76 12 83 10 88 15C94 22 87 33 73 45C67 40 62 34 58 28Z' stroke='%23b77aa9' stroke-width='1.05' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 25%;
  --romance-thumb-width: 48%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-corner"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='76' height='76' viewBox='0 0 76 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 59C30 50 44 36 54 16' stroke='%23d99acb' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M54 16C48 8 38 6 34 14C31 23 42 31 54 37C66 28 71 17 63 11C59 8 56 10 54 16Z' stroke='%23b77aa9' stroke-width='1.05' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 32%;
  --romance-thumb-width: 33%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-orbit"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='92' height='64' viewBox='0 0 92 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='46' cy='32' rx='37' ry='15' transform='rotate(-11 46 32)' stroke='%23d99acb' stroke-width='1.05'/%3E%3Cpath d='M46 47C37 39 28 34 28 25C28 19 33 15 39 15C43 15 45 18 46 23C48 18 51 15 56 15C62 15 67 19 67 25C67 34 55 39 46 47Z' stroke='%23b77aa9' stroke-width='1.08' stroke-linejoin='round'/%3E%3Cpath d='M10 42C25 53 64 55 84 36' stroke='%23d99acb' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 29%;
  --romance-thumb-width: 42%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-double"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='108' height='48' viewBox='0 0 108 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 30C21 18 33 18 46 31C59 42 76 41 101 19' stroke='%23d99acb' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M35 29C28 22 25 16 30 12C35 8 41 13 42 18C45 13 51 11 55 16C60 22 53 31 42 39C39 36 37 32 35 29ZM76 29C70 23 68 18 72 15C77 12 81 16 82 21C85 17 90 16 93 20C97 25 91 32 83 38C80 35 78 32 76 29Z' stroke='%23b77aa9' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 23%;
  --romance-thumb-width: 48%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-thread"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='124' height='38' viewBox='0 0 124 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 20C25 12 50 13 72 23C91 31 108 29 121 17' stroke='%23d99acb' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M72 23C66 17 65 11 70 8C75 5 80 10 80 16C84 11 90 10 93 15C98 22 88 31 80 36C77 32 75 27 72 23Z' stroke='%23b77aa9' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 19%;
  --romance-thumb-width: 55%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor^="heart-signature"] {
  --romance-thumb-art: url("data:image/svg+xml,%3Csvg width='116' height='50' viewBox='0 0 116 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 32C25 12 43 42 58 25C71 11 61 3 51 12C42 21 53 34 70 30C88 26 99 18 112 26' stroke='%23d99acb' stroke-width='1.28' stroke-linecap='round'/%3E%3Cpath d='M32 31C25 24 22 18 27 14C32 10 38 15 39 20C42 15 48 13 52 18C57 24 50 33 39 41C36 38 34 34 32 31Z' stroke='%23b77aa9' stroke-width='1.02' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-thumb-height: 24%;
  --romance-thumb-width: 51%;
}

body[data-book-style="romance"] .spread-thumb-preview[data-decor$="-d"] {
  --romance-thumb-bottom: auto;
  --romance-thumb-left: 8%;
  --romance-thumb-right: auto;
  --romance-thumb-top: 8%;
  --romance-thumb-transform: rotate(3deg);
}

.book-spread[data-style="romance"][data-decor^="heart-line"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='300' height='112' viewBox='0 0 300 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 54C60 85 147 39 198 61C241 80 272 70 296 50' stroke='%23d99acb' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M199 61C177 40 168 18 184 8C201 -2 216 15 219 31C226 15 242 5 256 16C273 30 257 61 221 94C213 82 206 70 199 61Z' stroke='%23b77aa9' stroke-width='1.55' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 12px;
  --romance-left-height: 112px;
  --romance-left-left: 18px;
  --romance-left-opacity: 0.5;
  --romance-left-right: auto;
  --romance-left-width: 300px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='218' height='78' viewBox='0 0 218 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 45C38 22 76 33 116 48C149 60 179 54 214 25' stroke='%23d99acb' stroke-width='1.65' stroke-linecap='round'/%3E%3Cpath d='M116 48C104 35 99 22 108 16C119 9 128 20 129 31C135 20 146 16 154 24C164 35 151 52 130 70C124 62 121 55 116 48Z' stroke='%23b77aa9' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 78px;
  --romance-right-right: 20px;
  --romance-right-top: 26px;
  --romance-right-width: 218px;
}

.book-spread[data-style="romance"][data-decor^="heart-tail"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='304' height='118' viewBox='0 0 304 118' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 88C36 116 84 108 121 82C164 52 205 18 300 34' stroke='%23f5dbe8' stroke-width='8.5' stroke-linecap='round'/%3E%3Cpath d='M121 82C96 35 51 17 22 50C36 82 77 91 121 82ZM121 82C150 35 134 7 99 9C67 14 66 50 121 82Z' stroke='%23f5dbe8' stroke-width='8.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 16px;
  --romance-left-height: 118px;
  --romance-left-left: 0;
  --romance-left-opacity: 0.78;
  --romance-left-right: auto;
  --romance-left-width: 304px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='220' height='78' viewBox='0 0 220 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 58C24 78 62 73 91 52C123 30 154 7 218 19' stroke='%23f5dbe8' stroke-width='5.6' stroke-linecap='round'/%3E%3Cpath d='M91 52C73 22 40 12 20 35C31 57 60 62 91 52ZM91 52C112 21 101 3 76 5C54 9 53 32 91 52Z' stroke='%23f5dbe8' stroke-width='5.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 78px;
  --romance-right-right: 18px;
  --romance-right-top: 24px;
  --romance-right-width: 220px;
}

.book-spread[data-style="romance"][data-decor^="heart-loop"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='252' height='116' viewBox='0 0 252 116' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 83C54 32 108 89 138 56C164 28 139 8 113 30C91 50 112 81 150 70C190 58 218 31 248 52' stroke='%23d99acb' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M138 56C119 32 120 13 137 7C154 0 171 15 172 35C181 16 199 11 211 24C226 41 206 68 174 101C159 88 148 70 138 56Z' stroke='%23b77aa9' stroke-width='1.42' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 116px;
  --romance-left-left: 20px;
  --romance-left-opacity: 0.52;
  --romance-left-right: auto;
  --romance-left-top: 24px;
  --romance-left-width: 252px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='154' height='104' viewBox='0 0 154 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M76 88C58 70 31 57 31 35C31 22 40 14 53 14C63 14 72 21 76 32C81 21 90 14 100 14C113 14 122 22 122 35C122 57 94 70 76 88Z' stroke='%23d99acb' stroke-width='1.32' stroke-linejoin='round'/%3E%3Cpath d='M12 42C37 19 59 18 76 32M76 32C95 18 120 21 142 42' stroke='%23b77aa9' stroke-width='1.08' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-right-bottom: 20px;
  --romance-right-height: 104px;
  --romance-right-right: 26px;
  --romance-right-width: 154px;
}

.book-spread[data-style="romance"][data-decor^="heart-corner"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='154' height='154' viewBox='0 0 154 154' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 127C60 105 92 72 115 22' stroke='%23d99acb' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M115 22C101 4 78 0 69 19C63 40 88 58 115 74C142 54 151 28 132 14C123 8 117 12 115 22Z' stroke='%23b77aa9' stroke-width='1.38' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 18px;
  --romance-left-height: 154px;
  --romance-left-left: 18px;
  --romance-left-opacity: 0.5;
  --romance-left-right: auto;
  --romance-left-width: 154px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='132' height='132' viewBox='0 0 132 132' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 108C51 88 79 61 99 18' stroke='%23d99acb' stroke-width='1.55' stroke-linecap='round'/%3E%3Cpath d='M99 18C87 4 68 2 60 17C55 35 76 51 99 64C122 47 129 24 113 12C106 8 101 11 99 18Z' stroke='%23b77aa9' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 132px;
  --romance-right-right: 20px;
  --romance-right-top: 22px;
  --romance-right-width: 132px;
}

.book-spread[data-style="romance"][data-decor^="heart-orbit"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='206' height='138' viewBox='0 0 206 138' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='103' cy='69' rx='82' ry='31' transform='rotate(-11 103 69)' stroke='%23d99acb' stroke-width='1.35'/%3E%3Cpath d='M103 102C82 84 61 72 61 50C61 36 72 27 86 27C96 27 101 35 103 46C108 35 116 27 128 27C142 27 153 36 153 50C153 72 124 84 103 102Z' stroke='%23b77aa9' stroke-width='1.32' stroke-linejoin='round'/%3E%3Cpath d='M21 89C55 114 143 118 188 79' stroke='%23d99acb' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --romance-left-bottom: auto;
  --romance-left-height: 138px;
  --romance-left-left: 24px;
  --romance-left-opacity: 0.5;
  --romance-left-right: auto;
  --romance-left-top: 22px;
  --romance-left-width: 206px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='154' height='116' viewBox='0 0 154 116' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='77' cy='58' rx='61' ry='24' transform='rotate(-11 77 58)' stroke='%23d99acb' stroke-width='1.15'/%3E%3Cpath d='M77 84C61 70 45 61 45 44C45 33 53 26 64 26C72 26 76 32 77 40C81 32 87 26 96 26C107 26 115 33 115 44C115 61 93 70 77 84Z' stroke='%23b77aa9' stroke-width='1.12' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: 20px;
  --romance-right-height: 116px;
  --romance-right-right: 24px;
  --romance-right-width: 154px;
}

.book-spread[data-style="romance"][data-decor^="heart-double"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='252' height='102' viewBox='0 0 252 102' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 64C41 34 72 34 104 64C135 93 175 88 246 27' stroke='%23d99acb' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M82 63C65 47 59 32 72 22C84 12 99 24 101 38C109 25 122 21 132 32C145 47 128 70 102 91C94 82 88 73 82 63ZM176 62C161 48 156 36 166 28C177 20 188 30 190 42C198 32 209 29 217 39C228 51 214 70 191 88C184 80 181 70 176 62Z' stroke='%23b77aa9' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 16px;
  --romance-left-height: 102px;
  --romance-left-left: 20px;
  --romance-left-opacity: 0.52;
  --romance-left-right: auto;
  --romance-left-width: 252px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='170' height='72' viewBox='0 0 170 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 43C31 20 53 22 75 43C98 63 124 61 166 18' stroke='%23d99acb' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M60 42C49 32 45 22 53 16C62 10 71 19 72 28C77 20 86 17 93 24C101 34 91 49 73 64C68 58 64 49 60 42ZM119 42C109 32 106 24 113 18C121 13 129 21 130 30C135 23 143 21 148 28C155 37 146 50 131 64C126 58 123 49 119 42Z' stroke='%23b77aa9' stroke-width='1.05' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 72px;
  --romance-right-right: 22px;
  --romance-right-top: 24px;
  --romance-right-width: 170px;
}

.book-spread[data-style="romance"][data-decor^="heart-thread"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='300' height='82' viewBox='0 0 300 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 42C56 23 118 26 169 51C215 72 260 67 296 35' stroke='%23d99acb' stroke-width='1.95' stroke-linecap='round'/%3E%3Cpath d='M169 51C154 36 150 21 162 14C174 6 187 17 188 32C197 20 211 18 219 30C231 47 206 68 188 78C181 68 176 59 169 51Z' stroke='%23b77aa9' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 10px;
  --romance-left-height: 82px;
  --romance-left-left: 14px;
  --romance-left-opacity: 0.52;
  --romance-left-right: auto;
  --romance-left-width: 300px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='208' height='60' viewBox='0 0 208 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 30C42 16 85 18 121 36C153 51 181 47 205 24' stroke='%23d99acb' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M121 36C110 27 108 17 116 12C125 7 134 16 135 26C141 17 151 16 157 24C166 36 149 50 135 57C130 50 126 42 121 36Z' stroke='%23b77aa9' stroke-width='1.05' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 60px;
  --romance-right-right: 22px;
  --romance-right-top: 28px;
  --romance-right-width: 208px;
}

.book-spread[data-style="romance"][data-decor^="heart-signature"] {
  --romance-left-art: url("data:image/svg+xml,%3Csvg width='276' height='108' viewBox='0 0 276 108' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 68C54 20 98 90 137 49C169 15 144 -4 118 22C96 45 122 78 163 69C206 60 235 38 272 55' stroke='%23d99acb' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M76 67C59 51 54 35 66 26C78 16 93 28 95 42C103 29 118 24 128 36C141 51 124 73 96 95C88 86 83 76 76 67Z' stroke='%23b77aa9' stroke-width='1.28' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-left-bottom: 14px;
  --romance-left-height: 108px;
  --romance-left-left: 20px;
  --romance-left-opacity: 0.52;
  --romance-left-right: auto;
  --romance-left-width: 276px;
  --romance-right-art: url("data:image/svg+xml,%3Csvg width='184' height='76' viewBox='0 0 184 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 47C36 16 67 61 91 34C112 12 96 0 78 17C64 31 80 53 108 48C137 43 160 27 181 40' stroke='%23d99acb' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M51 46C40 36 37 26 45 20C53 14 62 22 63 31C68 23 78 20 84 28C93 38 81 53 64 68C58 61 55 52 51 46Z' stroke='%23b77aa9' stroke-width='1.08' stroke-linejoin='round'/%3E%3C/svg%3E");
  --romance-right-bottom: auto;
  --romance-right-height: 76px;
  --romance-right-right: 22px;
  --romance-right-top: 24px;
  --romance-right-width: 184px;
}

.book-spread[data-style="romance"][data-decor$="-d"] {
  --romance-left-opacity: 0.56;
  --romance-left-transform: translate(5px, -5px) rotate(2deg);
  --romance-right-opacity: 0.52;
  --romance-right-transform: translate(-6px, 5px);
}

.book-gutter {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08));
}

.photo-slot,
.page-title,
.page-note,
.page-qr {
  z-index: 1;
  position: absolute;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.photo-slot {
  overflow: hidden;
  border: 1px solid var(--book-photo-border);
  border-radius: var(--book-photo-radius);
  background-color: var(--slot-empty);
  background-clip: padding-box;
  background-position: center;
  background-size: cover;
  filter: var(--book-photo-filter);
  transition: border-color 0.16s ease, border-radius 0.16s ease, box-shadow 0.16s ease, outline 0.16s ease, filter 0.16s ease;
}

.photo-slot.has-live-video {
  background-color: #151515;
}

.slot-live-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  filter: grayscale(1) contrast(1.08);
}

.photo-slot.is-empty::before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "+\AПЕРЕТАЩИТЬ ФОТО";
  color: rgba(21, 21, 21, 0.18);
  font-size: 9px;
  letter-spacing: 0.12em;
  line-height: 2;
  text-align: center;
  white-space: pre;
  transform: translate(-50%, -50%);
}

.slot-large.is-empty::before {
  content: "+\AПЕРЕТАЩИТЬ ФОТО";
}

.photo-slot::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.photo-slot:hover,
.photo-slot.is-selected {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.slot-large {
  left: 12px;
  top: 14px;
  width: 324px;
  height: 420px;
}

.slot-wide {
  left: 34px;
  top: 28px;
  width: 296px;
  height: 154px;
}

.slot-small {
  width: 92px;
  height: 120px;
}

.slot-small-left {
  left: 34px;
  top: 316px;
  width: 126px;
  height: 90px;
}

.slot-small-right {
  right: 30px;
  top: 204px;
  width: 118px;
  height: 202px;
}

.page-title {
  left: 62px;
  top: 210px;
  width: 112px;
  color: var(--book-text);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.08em;
  line-height: 1.12;
  text-align: left;
  white-space: pre-line;
}

.page-title.is-placeholder {
  color: rgba(21, 21, 21, 0.2);
  font-family: Inter, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-note.is-placeholder {
  color: rgba(21, 21, 21, 0.24);
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-note {
  color: var(--book-muted);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  white-space: pre-line;
}

.page-title[data-size="small"],
.page-note[data-size="small"] {
  font-size: 11px;
}

.page-title[data-size="medium"] {
  font-size: 17px;
}

.page-note[data-size="medium"] {
  font-size: 13px;
}

.page-title[data-size="large"] {
  font-size: 21px;
}

.page-note[data-size="large"] {
  font-size: 15px;
}

.note-left {
  left: 36px;
  bottom: 26px;
  width: 118px;
  text-align: center;
}

.note-right {
  left: 182px;
  top: 211px;
  width: 142px;
  min-height: 58px;
  font-size: 10px;
  line-height: 1.42;
}

.page-title:hover,
.page-title.is-selected,
.page-note:hover,
.page-note.is-selected {
  box-shadow: 0 0 0 2px rgba(210, 53, 45, 0.24);
  background: rgba(255, 255, 255, 0.78);
}

.page-qr {
  left: 151px;
  bottom: 40px;
  display: none;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

.page-qr.is-visible {
  display: grid;
  gap: 3px;
  place-items: center;
}

.page-qr svg {
  width: 100%;
  height: 100%;
  background: transparent;
}

.page-qr span {
  display: none;
}

.page-folio {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 10px;
  left: 0;
  color: rgba(21, 21, 21, 0.18);
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.book-object {
  touch-action: none;
}

.book-object .element-move-handle,
.book-object .element-resize-handle {
  position: absolute;
  z-index: 20;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.book-object:hover .element-move-handle,
.book-object:hover .element-resize-handle,
.book-object.is-selected .element-move-handle,
.book-object.is-selected .element-resize-handle {
  opacity: 1;
}

.element-move-handle {
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(21, 21, 21, 0.18);
  background: rgba(255, 255, 255, 0.9);
  cursor: grab;
  box-shadow: 0 5px 14px rgba(21, 21, 21, 0.16);
}

.element-move-handle:active {
  cursor: grabbing;
}

.element-move-handle::before {
  width: 13px;
  height: 13px;
  background-image: radial-gradient(#151515 1.25px, transparent 1.7px);
  background-position: 0 0;
  background-size: 6px 6px;
  content: "";
}

.element-resize-handle {
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, 0.92) 47% 100%),
    linear-gradient(135deg, transparent 0 60%, rgba(21, 21, 21, 0.5) 61% 64%, transparent 65%),
    linear-gradient(135deg, transparent 0 76%, rgba(21, 21, 21, 0.5) 77% 80%, transparent 81%);
  cursor: nwse-resize;
}

.spread-nav {
  display: grid;
  grid-template-columns: 46px auto auto 46px;
  gap: 14px;
  align-items: center;
  min-height: 84px;
  padding: 0 24px;
  justify-content: center;
  border-top: 1px solid var(--line);
  background: #efe9de;
}

.spread-nav > button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #ddd4c7;
  border-radius: 0;
  background: #f5efe6;
  color: #aea69a;
  font-size: 0;
  line-height: 1;
}

.spread-nav > button svg {
  color: currentColor;
}

.spread-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  white-space: nowrap;
}

.spread-nav-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  color: #9f968b;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1;
}

.spread-dots .spread-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #cec5b8;
  transition: background 0.16s ease, transform 0.16s ease, width 0.16s ease, height 0.16s ease;
}

.spread-dots .spread-dot.is-active {
  width: 40px;
  height: 5px;
  min-width: 40px;
  min-height: 5px;
  background: var(--red);
}

.spread-dots .spread-dot:hover {
  transform: translateY(-1px);
  background: #cfc6b8;
}

.spread-dots .spread-dot.is-active:hover {
  background: var(--red);
}

.book-spread.is-swapping {
  animation-duration: 220ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}

.book-spread.is-swapping[data-swap-direction="next"] {
  animation-name: spread-swap-next;
}

.book-spread.is-swapping[data-swap-direction="prev"] {
  animation-name: spread-swap-prev;
}

@keyframes spread-swap-next {
  from {
    opacity: 0.72;
    transform: translate3d(18px, 8px, 0) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes spread-swap-prev {
  from {
    opacity: 0.72;
    transform: translate3d(-18px, 8px, 0) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.inspector-panel {
  height: 100%;
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

.inspector-section {
  padding: 18px 16px 20px;
  border-bottom: 1px solid var(--line);
}

.inspector-section h2 {
  margin: 0 0 14px;
  color: #a79e93;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.inspector-section p {
  margin: 10px 0 0;
  color: #9c9489;
  font-size: 11px;
}

.style-list {
  display: grid;
  gap: 7px;
}

.style-option {
  display: grid;
  grid-template-columns: 24px 1fr 6px;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid #d4ccbe;
  background: transparent;
  color: #151515;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.style-option strong,
.style-option small {
  display: block;
}

.style-option strong {
  font-size: 13px;
  line-height: 1.1;
}

.style-option small {
  margin-top: 4px;
  color: #9d9588;
  font-size: 9px;
  line-height: 1.1;
}

.style-color {
  position: relative;
  overflow: hidden;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(21, 21, 21, 0.12);
  background: var(--style-color);
}

.style-color::before,
.style-color::after {
  position: absolute;
  display: block;
  content: "";
}

.style-option[data-style-option="minimal"] .style-color {
  background: #f8f6ef;
}

.style-option[data-style-option="minimal"] .style-color::before {
  inset: 6px;
  border: 1px solid rgba(21, 21, 21, 0.1);
}

.style-option[data-style-option="minimal"] .style-color::after {
  display: none;
}

.style-option[data-style-option="mono"] .style-color {
  background: #f4f4f2;
}

.style-option[data-style-option="mono"] .style-color::before {
  inset: 4px 11px 4px 4px;
  background: #151515;
}

.style-option[data-style-option="mono"] .style-color::after {
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(21, 21, 21, 0.56);
  border-bottom: 1px solid rgba(21, 21, 21, 0.56);
}

.style-option[data-style-option="bright"] .style-color {
  background: #fff3df;
}

.style-option[data-style-option="bright"] .style-color::before {
  left: 4px;
  top: 5px;
  width: 13px;
  height: 10px;
  border-top: 1px solid #e77d28;
  border-left: 1px solid #2f8b8f;
  transform: rotate(-4deg);
}

.style-option[data-style-option="bright"] .style-color::after {
  right: 4px;
  bottom: 5px;
  width: 7px;
  height: 7px;
  background: #ffd35c;
}

.style-option[data-style-option="childhood"] .style-color {
  border-radius: 6px;
  background: #fffdf0;
}

.style-option[data-style-option="childhood"] .style-color::before {
  inset: 4px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1.2 L8.65 5.1 L12.8 5.45 L9.66 8.2 L10.6 12.3 L7 10.18 L3.4 12.3 L4.34 8.2 L1.2 5.45 L5.35 5.1 Z' fill='%23efbf6f' stroke='%23c5bb73' stroke-width='0.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.style-option[data-style-option="childhood"] .style-color::after {
  right: 3px;
  top: 4px;
  width: 3px;
  height: 3px;
  background: #c5bb73;
  border-radius: 50%;
}

.style-option[data-style-option="romance"] .style-color {
  background: #fff8fd;
}

.style-option[data-style-option="romance"] .style-color::before {
  inset: 4px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 12.1 C4.6 9.95 1.7 8.05 1.7 5.05 C1.7 3.45 2.85 2.3 4.35 2.3 C5.3 2.3 6.22 2.82 7 3.78 C7.78 2.82 8.7 2.3 9.65 2.3 C11.15 2.3 12.3 3.45 12.3 5.05 C12.3 8.05 9.4 9.95 7 12.1Z' fill='%23f1adff' stroke='%23d99acb' stroke-width='0.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}

.style-option[data-style-option="romance"] .style-color::after {
  display: none;
}

.style-option[data-style-option="folk"] .style-color {
  background: #fffaf0;
}

.style-option[data-style-option="folk"] .style-color::before {
  left: 5px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 12C4.6 9.9 2 8.2 2 5.6C2 4.2 3 3.2 4.3 3.2C5.1 3.2 6 3.7 7 4.8C8 3.7 8.9 3.2 9.7 3.2C11 3.2 12 4.2 12 5.6C12 8.2 9.4 9.9 7 12Z' fill='%23c73535'/%3E%3C/svg%3E") center / contain no-repeat;
}

.style-option[data-style-option="folk"] .style-color::after {
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #1f6aa5;
  border-bottom: 2px solid #1f6aa5;
}

.style-option[data-style-option="vintage"] .style-color {
  background: #fff8eb;
}

.style-option[data-style-option="vintage"] .style-color::before {
  inset: 5px;
  border: 1px solid rgba(125, 67, 29, 0.28);
}

.style-option[data-style-option="vintage"] .style-color::after {
  right: 4px;
  top: 3px;
  width: 1px;
  height: 16px;
  background: rgba(125, 67, 29, 0.2);
  box-shadow: -7px 0 0 rgba(125, 67, 29, 0.12);
}

.style-option[data-style-option] .style-color {
  border-radius: 0;
  background: var(--style-color);
}

.style-option[data-style-option] .style-color::before,
.style-option[data-style-option] .style-color::after {
  display: none;
}

.style-option i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.style-option.is-active {
  border-color: #151515;
  background: #151515;
  color: #fff;
}

.style-option.is-active .style-color {
  border-color: rgba(255, 255, 255, 0.34);
}

.style-option.is-active i {
  background: var(--red);
}

.page-count-list {
  display: flex;
  gap: 7px;
}

.page-count {
  min-width: 38px;
  height: 32px;
  border: 1px solid #d4ccbe;
  background: transparent;
  color: #151515;
  font-size: 13px;
}

.page-count.is-active {
  border-color: #151515;
  background: #151515;
  color: #fff;
}

.book-progress {
  height: 4px;
  background: #d2cabd;
}

.book-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  transition: width 0.2s ease;
}

.selected-photo .selection-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.selection-action-wide {
  grid-column: 1 / -1;
}

.selection-actions button {
  min-height: 34px;
  border: 1px solid #d4ccbe;
  background: #f4eee4;
  color: #151515;
  font-size: 12px;
}

.selection-actions .selection-action-wide {
  min-height: 38px;
  border: 0;
  background: #151515;
  color: #fff;
  font-weight: 700;
}

.selection-actions .selection-action-danger {
  grid-column: 1 / -1;
  border-color: rgba(210, 53, 45, 0.42);
  color: var(--red);
}

.selection-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.book-params {
  display: grid;
  gap: 13px;
  margin: 0 0 22px;
}

.book-params div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.book-params dt,
.book-params dd {
  margin: 0;
  font-size: 13px;
}

.book-params dt {
  color: #948a7e;
}

.book-params dd {
  color: #151515;
  font-weight: 600;
  text-align: right;
}

.qr-primary,
.print-secondary,
.draft-link {
  width: 100%;
  border: 0;
}

.qr-primary {
  min-height: 46px;
  margin-bottom: 8px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.qr-primary.is-hidden {
  display: none;
}

.qr-note {
  display: none;
  margin: -4px 0 10px;
  color: #9c9489;
  font-size: 12px;
  line-height: 1.45;
}

.qr-note.is-visible {
  display: block;
}

.print-secondary {
  min-height: 43px;
  background: #a8a8a8;
  color: #fff;
  font-size: 16px;
}

.draft-link {
  margin-top: 15px;
  background: transparent;
  color: #9c9489;
  font-size: 12px;
}

.dialog-root:empty {
  display: none;
}

.dialog-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}

.dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 21, 0.52);
  backdrop-filter: blur(10px);
}

.dialog-card {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 4px;
  background: #fff;
  color: #111;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  background: #151515;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.text-form {
  display: grid;
  padding: 64px 56px 52px;
}

.text-form h2,
.qr-dialog h2,
.order-dialog h2 {
  margin: 0 0 28px;
  color: #111;
  font-size: 34px;
  line-height: 1;
}

.text-toolbar {
  display: grid;
  grid-template-columns: 40px 40px 40px 34px 34px minmax(104px, 1fr) 34px 34px 34px;
  gap: 6px;
  margin-bottom: 24px;
  padding: 8px;
  background: #f7f7f7;
}

.text-toolbar button,
.text-toolbar select {
  height: 30px;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 14px;
}

.text-toolbar [data-toggle="bold"] {
  font-weight: 800;
}

.text-toolbar [data-toggle="italic"] {
  font-family: Georgia, serif;
  font-style: italic;
}

.text-toolbar [data-align="left"] {
  text-align: left;
}

.text-toolbar [data-align="center"] {
  text-align: center;
}

.text-toolbar [data-align="justify"] {
  text-align: justify;
}

.text-toolbar .is-selected {
  background: #c9c9c9;
}

.text-toolbar select {
  min-width: 0;
  padding: 0 8px;
}

.text-form textarea {
  min-height: 116px;
  resize: vertical;
  border: 0;
  border-radius: 9px;
  background: #e9e9e9;
  padding: 18px 20px;
  color: #111;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  line-height: 1.35;
  outline: none;
}

.text-form textarea[data-size="small"] {
  font-size: 14px;
}

.text-form textarea[data-size="medium"] {
  font-size: 17px;
}

.text-form textarea[data-size="large"] {
  font-size: 22px;
}

.text-form p {
  margin: 12px 0 118px;
  color: #aaa;
  font-size: 12px;
}

.text-form button[type="submit"] {
  width: 136px;
  height: 58px;
  border: 0;
  background: var(--red);
  color: #fff;
  font-size: 22px;
}

.qr-dialog {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 30px;
  align-items: center;
  padding: 44px;
}

.qr-dialog p {
  margin: 0 0 16px;
  color: #847c71;
  font-size: 14px;
  line-height: 1.55;
}

.qr-code-card {
  display: grid;
  min-height: 278px;
  place-items: center;
  gap: 12px;
  border: 1px solid var(--soft-line);
  background: transparent;
}

.qr-code-card svg {
  width: 210px;
  height: 210px;
  background: transparent;
}

.qr-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.qr-dialog-actions button,
.qr-dialog-actions a {
  display: inline-grid;
  min-height: 40px;
  padding: 0 16px;
  place-items: center;
  border: 0;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.qr-dialog-actions button:nth-child(2) {
  background: #151515;
}

.dialog-card:has(.order-dialog) {
  width: min(1040px, 100%);
}

.order-dialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 0;
  align-items: stretch;
  background: #fff;
}

.order-checkout {
  display: grid;
  gap: 22px;
  padding: 38px 38px 42px;
}

.order-heading {
  max-width: 610px;
}

.order-kicker {
  display: inline-grid;
  min-height: 24px;
  margin-bottom: 15px;
  padding: 0 10px;
  place-items: center;
  border: 1px solid rgba(210, 53, 45, 0.52);
  color: var(--red);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.order-heading h2 {
  margin: 0 0 12px;
  color: #111;
  font-size: 34px;
  line-height: 1;
}

.order-heading p {
  margin: 0;
  color: #766d62;
  font-size: 14px;
  line-height: 1.55;
}

.order-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.order-step-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  background: #151515;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.order-step h3 {
  margin: 2px 0 12px;
  color: #151515;
  font-size: 17px;
  line-height: 1.1;
}

.order-details,
.payment-summary {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.order-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(21, 21, 21, 0.1);
}

.order-details div,
.payment-summary div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.order-details div {
  min-height: 46px;
  padding: 11px 13px;
  border-right: 1px solid rgba(21, 21, 21, 0.1);
  border-bottom: 1px solid rgba(21, 21, 21, 0.1);
}

.order-details div:nth-child(2n) {
  border-right: 0;
}

.order-details div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.order-details dt,
.payment-summary dt {
  color: #8b8277;
  font-size: 12px;
}

.order-details dd,
.payment-summary dd {
  margin: 0;
  color: #151515;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.order-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.order-field-grid label {
  display: grid;
  gap: 6px;
}

.order-field-grid span {
  color: #8b8277;
  font-size: 12px;
}

.order-field-grid input {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(21, 21, 21, 0.14);
  border-radius: 0;
  padding: 0 12px;
  background: #fff;
  color: #151515;
  font-size: 14px;
  outline: none;
}

.order-field-grid input:focus {
  border-color: var(--red);
}

.order-options {
  display: grid;
  gap: 9px;
}

.order-options--payment {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-option {
  display: block;
  cursor: pointer;
}

.order-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.order-option-body {
  position: relative;
  display: flex;
  min-height: 58px;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px 14px 12px 42px;
  border: 1px solid rgba(21, 21, 21, 0.12);
  background: #fff;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.order-option-body::before {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(21, 21, 21, 0.38);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.order-option-body::after {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  content: "";
  opacity: 0;
  transform: translateY(-50%);
}

.order-option input:checked + .order-option-body {
  border-color: rgba(210, 53, 45, 0.72);
  background: #fff8f5;
}

.order-option input:checked + .order-option-body::after {
  opacity: 1;
}

.order-option-body strong {
  display: block;
  color: #151515;
  font-size: 14px;
  line-height: 1.2;
}

.order-option-body small {
  display: block;
  margin-top: 4px;
  color: #8b8277;
  font-size: 12px;
  line-height: 1.35;
}

.order-option-body b {
  color: #151515;
  font-size: 13px;
  white-space: nowrap;
}

.order-option--compact .order-option-body {
  min-height: 76px;
  align-items: flex-start;
}

.payment-card {
  position: sticky;
  top: 0;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 38px 28px 34px;
  border-left: 1px solid rgba(21, 21, 21, 0.1);
  background: #f8f4ec;
}

.payment-card-top {
  display: grid;
  gap: 8px;
}

.payment-card-top span {
  color: var(--red);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.payment-card-top strong {
  color: #151515;
  font-size: 30px;
  line-height: 1;
}

.payment-summary {
  border-top: 1px solid rgba(21, 21, 21, 0.12);
  border-bottom: 1px solid rgba(21, 21, 21, 0.12);
}

.payment-summary div {
  padding: 11px 0;
  border-bottom: 1px solid rgba(21, 21, 21, 0.08);
}

.payment-summary div:last-child {
  border-bottom: 0;
}

.payment-qr {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(21, 21, 21, 0.08);
}

.payment-qr svg {
  width: 132px;
  height: 132px;
  background: #fff;
}

.payment-card small {
  color: #756d64;
  font-size: 12px;
  line-height: 1.45;
}

.order-dialog-actions {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 9px;
}

.order-dialog-actions button,
.order-copy-number {
  display: inline-grid;
  min-height: 42px;
  padding: 0 14px;
  place-items: center;
  border: 0;
  background: #151515;
  color: #fff;
  font-size: 14px;
}

.order-dialog-actions button:nth-child(2) {
  background: var(--red);
}

.order-copy-number {
  width: 100%;
  background: transparent;
  color: #151515;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.18);
}

.toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 24px;
  padding: 12px 18px;
  background: #151515;
  color: #fff;
  font-size: 14px;
  transform: translate(-50%, 16px);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1320px) {
  html,
  body {
    min-width: 1040px;
  }

  .book-editor-app {
    grid-template-columns: 224px minmax(650px, 1fr) 236px;
  }

  .workspace-scroll > .book-spread {
    transform: scale(0.92);
  }

  .spread-thumb-preview {
    --spread-thumb-scale: 0.2737;
  }

  .workspace-scroll {
    min-height: 0;
  }
}