html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 38%, #45403a 0%, #2e2a26 55%, #1d1a17 100%);
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
#stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
#flipbook { position: relative; }
#flipbook.open { box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4); }

/* ---------- hard covers ---------- */
.cover {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.09), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #142e56 0%, #24487f 46%, #142e56 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
}
.cover-front::before, .cover-back::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 12%;
  pointer-events: none; z-index: 2;
}
.cover-front::before { left: 0;  background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.14) 55%, rgba(0,0,0,0)); }
.cover-back::before  { right: 0; background: linear-gradient(to left,  rgba(0,0,0,.5), rgba(0,0,0,.14) 55%, rgba(0,0,0,0)); }
.cover-inner { position: absolute; inset: 0; }
.cover-frame {
  position: absolute; inset: 7%;
  border: 3px double #c9a84c; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #e7c96f;
  font-family: Georgia, 'Palatino Linotype', serif;
  padding: 0 6%;
}
.cover-title {
  font-variant: small-caps; letter-spacing: .1em;
  font-size: 2em; line-height: 1.25;
  text-shadow: 0 2px 3px rgba(0,0,0,.55);
}
.cover-orn { color: #b89a4e; font-size: 1.5em; margin-top: 1.1em; }
.cover-orn.big { font-size: 2.4em; }
.cover-sub { letter-spacing: .5em; font-size: .68em; margin-top: 1em; color: #cdb069; text-indent: .5em; }
.cover-author { margin-top: 2.4em; font-variant: small-caps; letter-spacing: .18em; font-size: 1.02em; color: #e2c26a; }

/* ---------- endpapers ---------- */
.endpaper {
  background:
    repeating-linear-gradient(45deg, rgba(120,96,58,.05) 0 3px, rgba(0,0,0,0) 3px 6px),
    linear-gradient(#e8dfc8, #dcd2b6);
  box-shadow: inset 0 0 55px rgba(96,74,40,.25);
}

/* ---------- paper pages ---------- */
.paper {
  background:
    radial-gradient(ellipse at 50% 45%, #faf5e9 55%, #f1e8d4 92%, #eadfc7 100%);
  color: #33291f;
}
/* inner spine shadow — the fold between the two pages of a spread */
.pg-right::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 9%;
  background: linear-gradient(to right, rgba(84,26,18,.30), rgba(84,26,18,.10) 52%, rgba(84,26,18,0));
  pointer-events: none; z-index: 3;
}
.pg-left::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 9%;
  background: linear-gradient(to left, rgba(84,26,18,.26), rgba(84,26,18,.09) 52%, rgba(84,26,18,0));
  pointer-events: none; z-index: 3;
}
.pg-single::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 6%;
  background: linear-gradient(to right, rgba(62,44,16,.18), rgba(84,26,18,0));
  pointer-events: none; z-index: 3;
}
/* outer edge — hint of the closed page stack */
.pg-right::after, .pg-left::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 7px;
  pointer-events: none; z-index: 3; opacity: .5;
}
.pg-right::after { right: 0; background: repeating-linear-gradient(to left, rgba(90,70,40,.16) 0 1px, rgba(0,0,0,0) 1px 3px); }
.pg-left::after  { left: 0;  background: repeating-linear-gradient(to right, rgba(90,70,40,.16) 0 1px, rgba(0,0,0,0) 1px 3px); }

/* ---------- text ---------- */
.textenv {
  font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  line-height: 1.55; text-align: justify;
  hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
  text-rendering: optimizeLegibility;
  color: #33291f;
}
.textenv p { margin: 0; text-indent: 1.5em; }
.textenv p.noind { text-indent: 0; }
.chead { margin-bottom: 1.25em; }
.cnum {
  text-align: center; font-variant: small-caps;
  letter-spacing: .24em; font-size: 1.26em;
  padding-top: 1em; text-indent: .24em; color: #4a3b28;
}
.corn { text-align: center; color: #8a744a; margin-top: .4em; font-size: 1em; }
.brk { text-align: center; margin: 1.1em 0; color: #8a744a; font-size: .78em; letter-spacing: .5em; text-indent: .5em; }
.theend { text-align: center; margin-top: 2.6em; letter-spacing: .4em; text-indent: .4em; font-size: 1.02em; color: #5a4a33; }
.folio { text-align: center; font-size: .66em; letter-spacing: .18em; color: #8d7b5f; font-family: Georgia, serif; }

/* ---------- title page ---------- */
.titlepage {
  position: absolute; inset: 10% 12%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: Georgia, 'Palatino Linotype', serif; color: #3d3020;
}
.tp-title { font-variant: small-caps; font-size: 1.85em; letter-spacing: .1em; line-height: 1.3; }
.tp-rule { width: 42%; height: 1px; background: #a08c5a; margin: 1.4em 0; }
.tp-sub { letter-spacing: .45em; font-size: .72em; color: #6a583c; text-indent: .45em; }
.tp-by { margin-top: 2.2em; font-style: italic; font-size: .85em; color: #6a583c; }
.tp-author { margin-top: .5em; font-variant: small-caps; letter-spacing: .16em; font-size: 1.12em; }
.tp-orn { margin-top: 2.2em; color: #8a744a; font-size: 1.3em; }

/* ---------- chrome ---------- */
.nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 60; cursor: pointer;
  font: 46px/1 Georgia, serif; color: rgba(255,255,255,.30);
  padding: 26px 14px; transition: color .2s;
  background: none; border: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
}
.nav:hover { color: rgba(255,255,255,.75); }
#nav-prev { left: 4px; }
#nav-next { right: 4px; }

#hint {
  position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%);
  z-index: 60; font: 12.5px/1.4 Georgia, serif; letter-spacing: .06em;
  color: rgba(255,255,255,.45); background: rgba(0,0,0,.25);
  padding: 6px 14px; border-radius: 20px; white-space: nowrap;
  transition: opacity 1.2s; pointer-events: none;
}
#hint.gone { opacity: 0; }

#loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(24,21,18,.82);
  font: 15px Georgia, serif; letter-spacing: .08em; color: #d8c9a6;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#loader.show { opacity: 1; pointer-events: auto; }
#loader .spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(216,201,166,.25); border-top-color: #d8c9a6;
  animation: lspin .9s linear infinite;
}
@keyframes lspin { to { transform: rotate(360deg); } }

/* ---------- embossed cover tooling ---------- */
.cover-inner::before {
  content: ''; position: absolute; inset: 2.2%;
  pointer-events: none; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, left bottom, left top, right top;
  background-size: 28px 28px;
}
.cover-inner::after {
  content: ''; position: absolute; inset: 1.4%;
  pointer-events: none; opacity: .95;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 52px 52px;
}

/* ---------- illustration captions & display lines ---------- */
.illus {
  margin: 1.15em 5%; padding: .5em 3%;
  text-align: center; font-style: italic;
  font-size: .84em; line-height: 1.45; color: #6b5a3e;
  border-top: 1px solid rgba(122,100,60,.4);
  border-bottom: 1px solid rgba(122,100,60,.4);
}
.disp {
  text-align: center; margin: 1em 8%;
  font-variant: small-caps; letter-spacing: .12em;
  font-size: .95em; color: #4a3b28;
}

.ctitle {
  text-align: center; font-variant: small-caps;
  letter-spacing: .08em; font-size: 1.05em;
  margin-top: .45em; color: #5a4a33;
}
.verse {
  text-align: center; font-style: italic;
  margin: 1.1em 0; line-height: 1.65; color: #4a3b28;
}

/* A PROSE EPIGRAPH -- the motto at the head of a chapter when it is a
   paragraph rather than a line of verse. Indented on both sides so the
   measure is visibly narrower than the text it stands over, which is what
   tells the eye it is a quotation and not the chapter's first paragraph. */
.epig {
  margin: 1.15em 7% 1.5em; text-indent: 0;
  font-style: italic; font-size: .9em; line-height: 1.6;
  color: #4a3b28; text-align: justify;
}
.epig + .epig { margin-top: -.7em; }   /* a quotation and its translation */

.letter {
  margin: 1.1em 6%; padding: .7em 1em;
  font-size: .88em; line-height: 1.6; font-style: italic;
  color: #4a3b28; background: rgba(146,120,70,.07);
  border-left: 2px solid rgba(122,100,60,.45);
}

.songtitle {
  text-align: center; font-variant: small-caps; letter-spacing: .18em;
  text-indent: .18em; font-size: .92em; color: #5a4a33; margin: 1.2em 0 .3em;
}
.plate {
  margin: 1.2em auto; padding: .45em 1.2em; width: fit-content;
  text-align: center; letter-spacing: .3em; text-indent: .3em; font-size: .86em;
  color: #4a3b28; border: 1px solid rgba(122,100,60,.55); border-radius: 2px;
  background: rgba(170,150,95,.14);
}
.prog {
  margin: 1.1em 6%; text-align: center; font-size: .85em; line-height: 1.75;
  color: #4a3b28; border-top: 1px solid rgba(122,100,60,.4);
  border-bottom: 1px solid rgba(122,100,60,.4); padding: .7em 0;
}


/* ---------- skip to page (fixed overlay: never touches #flipbook) ---------- */
#skipbar {
  position: fixed; left: 50%; bottom: 12px;
  transform: translateX(-50%) translateY(10px);
  z-index: 70;
  display: flex; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity .32s ease, transform .32s ease;
  font-family: Georgia, 'Palatino Linotype', serif;
}
#skipbar.vis { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

#skipbar button {
  font: 13.5px/1 Georgia, serif; letter-spacing: .06em;
  color: #ffeec0; background: rgba(38,10,66,.85);
  border: 1px solid rgba(255,216,106,.55); border-radius: 18px;
  padding: 9px 16px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .18s, color .18s, border-color .18s;
}
#skipbar button:hover { background: rgba(70,21,122,.94); color: #fff8dc; border-color: #ffd86a; }
#skipbar button:focus-visible { outline: 2px solid #ffd86a; outline-offset: 2px; }

#skip-wrap {
  display: none; align-items: center; gap: 6px;
  background: rgba(38,10,66,.9);
  border: 1px solid rgba(255,216,106,.55); border-radius: 18px;
  padding: 5px 6px 5px 12px;
}
#skip-wrap.open { display: flex; }
#skip-btn.gone { display: none; }

#skip-input {
  width: 74px; font: 14px/1 Georgia, serif; text-align: center;
  color: #1b0733; background: #f8f0e2;
  border: 1px solid rgba(255,216,106,.7); border-radius: 12px;
  padding: 7px 8px; -webkit-appearance: none; appearance: none;
}
#skip-input:focus { outline: 2px solid #ffd86a; outline-offset: 1px; }
#skip-err {
  font: 11.5px/1 Georgia, serif; letter-spacing: .05em;
  color: rgba(255,238,192,.72); padding-right: 8px; white-space: nowrap;
}

@keyframes skipShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
#skip-wrap.bad { animation: skipShake .34s ease; border-color: #ff5c7a; }
#skip-wrap.bad #skip-err { color: #ffb3c1; }

@media (prefers-reduced-motion: reduce) {
  #skipbar { transition: opacity .2s ease; transform: translateX(-50%); }
  #skipbar.vis { transform: translateX(-50%); }
  #skip-wrap.bad { animation: none; }
}

/* ---------- chapter half-title page ----------
   Same cream stock, margins and rules as a text page; no folio, as a printed
   half-title carries none. .chapanim is an empty full-bleed stage kept for
   per-chapter artwork later. Animation "rise and settle": numeral lifts, a
   hairline draws outward from the centre, the title follows.                */
.paper.intro { overflow: hidden; }

.intropage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.chapanim { position: absolute; inset: 0; pointer-events: none; }

.intro-label {
  position: relative; z-index: 2;
  text-align: center; padding: 0 14%;
  font-family: Georgia, 'Palatino Linotype', serif;
  color: #3a2f22;
}
.intro-label .il-num {
  display: block; font-size: .74em; letter-spacing: .34em;
  text-transform: uppercase; color: #8a6d3a;
}
.intro-label .il-rule {
  display: block; height: 1px; width: 0; margin: 1.15em auto;
  background: linear-gradient(to right, transparent, #b08d4c, transparent);
}
.intro-label .il-txt {
  display: block; font-size: 1.42em; line-height: 1.35; letter-spacing: .04em;
}
.intro-label .il-txt.il-solo {
  font-size: 1.9em; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
}
/* An optional summary beneath the title. Set smaller, italic and narrower
   than the measure of a text page, so that it reads as apparatus rather than
   as the opening of the story it stands in front of. */
.intro-label .il-sum {
  display: block; max-width: 22em; margin: 1.45em auto 0;
  font-size: .86em; line-height: 1.62; letter-spacing: .012em;
  font-style: italic; color: #5c4a32;
}

/* the reveal runs when the page comes into view, not on a loop */
.intropage .il-num,
.intropage .il-rule,
.intropage .il-sum,
.intropage .il-txt { opacity: 0; }

.intropage.play .il-num  { animation: introUp   .70s ease-out .10s both; }
.intropage.play .il-rule { animation: introRule .60s ease-out .68s both; }
.intropage.play .il-txt  { animation: introUp   .80s ease-out 1.00s both; }
.intropage.play .il-sum  { animation: introUp   .90s ease-out 1.38s both; }

@keyframes introUp   { from { opacity: 0; transform: translateY(12px); }
                       to   { opacity: 1; transform: none; } }
@keyframes introRule { from { width: 0;  opacity: 0; }
                       to   { width: 42%; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .intropage .il-num, .intropage .il-txt, .intropage .il-sum { opacity: 1; }
  .intropage .il-rule { opacity: 1; width: 42%; }
  .intropage.play .il-num,
  .intropage.play .il-rule,
  .intropage.play .il-sum,
  .intropage.play .il-txt { animation: none; }
  /* the drawing stays, but stops moving */
  .chapanim * { animation: none !important; }
}


/* ---------- translator's footnote ----------
   Three notes in Crime and Punishment are the translator's, not Dostoevsky's.
   They are set smaller and ruled off so they can't be mistaken for the text. */
.tnote { font-size: .82em; line-height: 1.5; color: #5b4f3f; margin: 1.05em 0 .95em;
         padding-top: .55em; border-top: 1px solid rgba(90,70,40,.28); text-indent: 0; }
/* A note with no marker of its own gets a dagger; a note that carries its
   own asterisk marker prints that instead, so the reader can match it. */
.tnote.dagger::before { content: '\2020\2003'; color: #937a45; }
.tn-m { color: #937a45; margin-right: .6em; font-weight: 700; letter-spacing: .04em; }


/* ---------- part half-title ----------
   'Part I' owns a whole leaf, like a chapter half-title. .partanim is a
   full-bleed stage left deliberately empty: the per-part animation goes there
   later and needs no change to the page geometry. The page keeps the ordinary
   paper aesthetic rather than going dark. */
.paper.part { overflow: hidden; }

/* ---------- full-page plate ----------
   A leaf given over entirely to one picture. No folio, no text envelope,
   nothing beside it. object-fit: contain is what keeps the plate honest:
   the image is fitted INSIDE the leaf whatever its proportions, so a wide
   plan and a tall portrait are both shown whole rather than cropped to
   fill. The inset leaves the paper's own margin showing as a mount. */
.paper.plateleaf { overflow: hidden; }
.fullimg {
  position: absolute; inset: 7% 8%;
  display: flex; align-items: center; justify-content: center;
}
/* A CAPTIONED PLATE. The uncaptioned rules above are left exactly as they
   were; these only take effect when the block carries a caption, so the
   plates in the two earlier books render identically. The figure becomes
   the flex child and stacks picture over caption, and the picture's own
   max-height is reduced to leave the caption room on the leaf. */
.fullimg.hascap figure {
  margin: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  max-width: 100%; max-height: 100%;
}
.fullimg.hascap img { max-height: 86%; }
.platecap {
  margin-top: .9em; padding: 0 4%;
  text-align: center; font-style: italic;
  font-family: Georgia,'Palatino Linotype',serif;
  font-size: .84em; line-height: 1.45; color: #6b5a3e;
}
.fullimg img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  /* the plates in this series are line blocks on white; a soft border and
     a little shadow sit them on the cream stock instead of letting them
     float as a bright rectangle */
  background: #fdfaf2;
  padding: 2.2%;
  border: 1px solid rgba(122, 100, 60, .45);
  box-shadow: 0 2px 10px rgba(84, 26, 18, .18);
}
.parttitle { position: absolute; inset: 0; display: flex;
             flex-direction: column; align-items: center; justify-content: center; }
.partanim  { position: absolute; inset: 0; pointer-events: none; }
.part-label { position: relative; z-index: 2; text-align: center; padding: 0 14%;
              font-family: Georgia,'Palatino Linotype',serif; color: #3a2f22; }
.part-label .pt-rule { display: block; height: 1px; width: 0; margin: 1.5em auto;
              background: linear-gradient(to right, transparent, #b08d4c, transparent); }

/* The word sits small and widely tracked above a big display numeral. */
.part-label .pt-word { display: block; font-size: .95em; letter-spacing: .52em;
              text-indent: .52em; text-transform: uppercase; color: #7a6440;
              margin-bottom: .18em; }
.part-label .pt-num  { display: block; font-size: 5.6em; line-height: 1;
              letter-spacing: .10em; text-indent: .10em; font-weight: 700;
              text-transform: uppercase;
              background: linear-gradient(180deg, #6b5636 0%, #b08d4c 42%,
                                          #e6cd92 62%, #8a6f42 100%);
              -webkit-background-clip: text; background-clip: text;
              color: #8a6f42; -webkit-text-fill-color: transparent;
              filter: drop-shadow(0 2px 0 rgba(255,252,244,.55))
                      drop-shadow(0 -1px 0 rgba(74,58,32,.28)); }
/* The legend's name, under the numeral. Optional: only parts that carry a
   "sub" get one. Set in italic at text size so it reads as a name rather
   than competing with the display numeral above it. */
.part-label .pt-sub  { display: block; margin-top: .70em; font-size: 1.06em;
              font-style: italic; letter-spacing: .06em; line-height: 1.35;
              color: #6b5636; }
/* A label with no numeral -- "Epilogue" -- is set as one modest line. */
.parttitle.solo .pt-num { font-size: 2.3em; letter-spacing: .30em; text-indent: .30em; }

/* ---- the animated stage behind the lettering ----
   Three rings open outward from the centre and six motes drift up through
   them. Every looping period is distinct, per the out-of-phase rule that
   governs the covers; the one-shot reveals are staged so the rules draw,
   then the word, then the numeral lands. */
.partanim .pa-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%;
              border: 1px solid rgba(176,141,76,.42); opacity: 0;
              transform: translate(-50%,-50%) scale(.2); }
.partanim .g0 { width: 34%; padding-bottom: 34%; }
.partanim .g1 { width: 52%; padding-bottom: 52%; border-color: rgba(176,141,76,.30); }
.partanim .g2 { width: 72%; padding-bottom: 72%; border-color: rgba(176,141,76,.20); }
.partanim .pa-mote { position: absolute; width: 5px; height: 5px; border-radius: 50%;
              background: rgba(176,141,76,.55); opacity: 0; }
.partanim .m0 { left: 22%; bottom: 16%; }
.partanim .m1 { left: 37%; bottom: 10%; }
.partanim .m2 { left: 52%; bottom: 19%; }
.partanim .m3 { left: 66%; bottom: 12%; }
.partanim .m4 { left: 78%; bottom: 22%; }
.partanim .m5 { left: 45%; bottom: 26%; }

/* ---- a drawing in place of the rings ----
   A book may hand its Book pages line art of their own, standing for the
   chapters in that Book. It is a full-bleed stage under the lettering, like
   .chapanim on a chapter half-title, and it REPLACES the rings rather than
   joining them -- the engine emits one stage or the other, never both.
   The drawings themselves live in the per-book scenes.css the builder
   appends; all this rule does is give them a stage to hang in. */
.partart { position: absolute; inset: 0; pointer-events: none; }

.parttitle .pt-word, .parttitle .pt-num, .parttitle .pt-rule,
.parttitle .pt-sub { opacity: 0; }
.parttitle.play .pt-rule:first-child { animation: ptRule .60s ease-out .10s both; }
.parttitle.play .pt-word { animation: ptUp .70s ease-out .46s both; }
.parttitle.play .pt-num  { animation: ptNum .95s cubic-bezier(.19,1,.22,1) .62s both; }
/* The legend's name arrives after the numeral has settled, and before
   the closing rule draws itself. */
.parttitle.play .pt-sub  { animation: ptUp .70s ease-out 1.16s both; }
.parttitle.play .pt-rule:last-child  { animation: ptRule .60s ease-out 1.62s both; }
.parttitle.play .g0 { animation: ptRing 1.50s cubic-bezier(.22,.9,.3,1) .30s both,
                                 ptBreathe 7.30s ease-in-out 1.9s infinite; }
.parttitle.play .g1 { animation: ptRing 1.70s cubic-bezier(.22,.9,.3,1) .48s both,
                                 ptBreathe 9.10s ease-in-out 2.2s infinite; }
.parttitle.play .g2 { animation: ptRing 1.90s cubic-bezier(.22,.9,.3,1) .66s both,
                                 ptBreathe 11.40s ease-in-out 2.6s infinite; }
.parttitle.play .m0 { animation: ptMote 6.20s ease-in-out 1.40s infinite; }
.parttitle.play .m1 { animation: ptMote 7.10s ease-in-out 1.95s infinite; }
.parttitle.play .m2 { animation: ptMote 8.30s ease-in-out 2.40s infinite; }
.parttitle.play .m3 { animation: ptMote 9.40s ease-in-out 1.70s infinite; }
.parttitle.play .m4 { animation: ptMote 10.60s ease-in-out 2.80s infinite; }
.parttitle.play .m5 { animation: ptMote 11.90s ease-in-out 3.20s infinite; }

/* ---------- the sand sequence on a part page ----------
   Three stages, in this order: the Book's title fades in letter by letter,
   the letters blow away downwind, and the numeral resolves in the space they
   leave. build.py bakes each letter's two delays and its own drift into
   inline custom properties, so the stagger is scaled to the length of the
   title and every Book page runs to the same clock however long its title is.

   The title is laid over the whole leaf rather than stacked above the label,
   so the numeral appears exactly where the title was standing rather than
   somewhere underneath it. Words are inline-block: a line may break between
   words and never inside one.

   Note on the two animations per letter. sandOut is declared with `both`, so
   during its delay it holds its own first frame -- and its first frame is the
   fully-arrived letter, which is precisely what sandIn finished on. That is
   what lets the two run back to back on one element without the second one
   wiping out the first while it waits. */
/* Tracking and word space have to be set against each other. These titles
   are capitals, and tracked-out capitals need a word space that grows with
   the tracking -- at .12em of tracking against a .42em gap the two readings
   were close enough that the line ran together and you could not see where
   one word ended. The tracking is now half what it was and the word space
   two and a half times, which puts them an order of magnitude apart. */
.parttitle.sandseq .pt-sand { position: absolute; inset: 10% 11%; z-index: 3;
              display: flex; flex-wrap: wrap; gap: .35em 0;
              align-items: center; justify-content: center; align-content: center;
              font-family: Georgia,'Palatino Linotype',serif; color: #3a2f22;
              font-size: 1.06em; line-height: 1.85; letter-spacing: .06em;
              pointer-events: none; }

/* The word-space, and why it is a margin rather than the flex gap above.
   The letters are wrapped in one aria-hidden span so a screen reader gets the
   title once from the container instead of spelling it out. That wrapper is
   the ONLY child of the flex box, so flex gap had nothing to apply between --
   and because the builder joins the word spans with no whitespace at all,
   there was no word-space in the markup either. The words were separated by
   precisely the trailing letter-spacing of their last letter, which is to say
   by exactly the same distance as the letters inside them, which is exactly
   what a reader reported: you could not see where one word ended.

   display:contents lifts the words back out to be the flex items, and the
   margin gives them a word-space that holds whatever layout context they end
   up in. Belt and braces on purpose: this went wrong once already. */
.parttitle.sandseq .pt-sand .sandwrap { display: contents; }
.parttitle.sandseq .pt-sand .w { display: inline-block; white-space: nowrap;
              margin-right: 1.05em; }
.parttitle.sandseq .pt-sand .w:last-child { margin-right: 0; }
.parttitle.sandseq .pt-sand .l { display: inline-block; opacity: 0;
              will-change: transform, opacity, filter; }
/* The hold. The last letter of a title arrives at 1.55s -- one second of
   stagger plus its own .55s -- so the hold is what is left for reading it,
   not the whole of the number below. At 2.20s the assembled title stood for
   two thirds of a second, which is not long enough to read a line that can
   run to two hundred and fifty characters. At 5.60s it stands for four
   seconds. Everything downstream is timed off this number. */
.parttitle.sandseq.play .pt-sand .l {
              animation: sandIn .55s ease-out var(--fd) both,
                         sandOut 1.05s cubic-bezier(.42,0,.86,.24)
                                 calc(5.60s + var(--bd)) both; }

/* The numeral waits for the title to be most of the way gone: the first
   letters are still in the air when it starts to arrive. These four move with
   the hold above -- 3.40s later than they were, because the hold is. */
.parttitle.sandseq.play .pt-rule:first-child { animation: ptRule .60s ease-out 7.26s both; }
.parttitle.sandseq.play .pt-word { animation: ptUp .70s ease-out 7.42s both; }
.parttitle.sandseq.play .pt-num  { animation: ptNum .95s cubic-bezier(.19,1,.22,1) 7.58s both; }
.parttitle.sandseq.play .pt-rule:last-child { animation: ptRule .60s ease-out 8.00s both; }

@keyframes sandIn  { from { opacity:0; transform: translateY(12px) scale(.94);
                            filter: blur(3px); }
                     to   { opacity:1; transform:none; filter: blur(0); } }
@keyframes sandOut { 0%   { opacity:1; transform:none; filter: blur(0); }
                     22%  { opacity:.94;
                            transform: translate(calc(var(--dx) * .07), calc(var(--dy) * .07))
                                       rotate(calc(var(--r) * .05)); filter: blur(.4px); }
                     100% { opacity:0;
                            transform: translate(var(--dx), var(--dy))
                                       rotate(var(--r)) scale(.55); filter: blur(4px); } }

/* A reader who has asked for less motion gets the same three facts without
   the weather: the title simply is there, and the numeral simply is there. */
@media (prefers-reduced-motion: reduce) {
  .parttitle.sandseq .pt-sand .l,
  .parttitle.sandseq.play .pt-sand .l { animation: none; opacity: 1; }
  .parttitle.sandseq.play .pt-word,
  .parttitle.sandseq.play .pt-num,
  .parttitle.sandseq.play .pt-rule { animation-delay: 0s; }
  /* the Book's drawing stays on the page, but stops being drawn */
  .partart * { animation: none !important; }
}

@keyframes ptUp   { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes ptRule { from { width:0; opacity:0; } to { width:46%; opacity:1; } }
@keyframes ptNum  { 0%   { opacity:0; transform: translateY(26px) scale(.82); letter-spacing:.34em; }
                    100% { opacity:1; transform:none; letter-spacing:.10em; } }
@keyframes ptRing { from { opacity:0; transform: translate(-50%,-50%) scale(.2); }
                    to   { opacity:1; transform: translate(-50%,-50%) scale(1); } }
@keyframes ptBreathe { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes ptMote { 0%   { opacity:0; transform: translateY(0) scale(.7); }
                    18%  { opacity:.85; }
                    82%  { opacity:.85; }
                    100% { opacity:0; transform: translateY(-190px) scale(1.25); } }


/* ---------- signature and subhead ----------
   Both were emitted by the engine but never styled: 75 signature lines across
   Little Women, Pride and Prejudice and The Jungle Book were rendering as
   ordinary paragraphs. A signature closes a letter, so it sits right and
   italic; a subhead is a minor division inside a chapter. */
.sig { text-align: right; font-style: italic; text-indent: 0;
       margin: .35em 0 1.05em; padding-right: .4em; color: #40362a; }
.subhead { text-align: center; text-indent: 0; margin: 1.35em 0 .85em;
           font-size: .93em; letter-spacing: .17em; text-transform: uppercase;
           color: #5b4a33; }

/* A SECTION HEAD -- the third level of division, added for The Theory of
   Moral Sentiments, which sets Part over Section over Chapter. It has to read
   as LARGER than a chapter head and SMALLER than a Part leaf, and the way it
   does that is by being ruled rather than by being loud: rules above and
   below mark it as a boundary, while the type stays close to the chapter
   head's size so the page does not acquire a second shouting voice. */
.sect {
  margin: 1.6em 4% 1.4em; text-align: center;
  border-top: 1.2px solid #c3b291;
  border-bottom: 1.2px solid #c3b291;
  padding: .55em 0 .6em;
}
.sect-num {
  display: block; font-variant: small-caps; letter-spacing: .16em;
  font-size: .82em; color: #8a7350; margin-bottom: .18em;
}
.sect-ttl {
  display: block; font-style: italic; font-size: 1.02em;
  line-height: 1.45; color: #4a3b28;
}

/* AN EPIGRAPH WITH ITS SOURCE, SET AS ONE OBJECT.  Udolpho heads every one of
   its 57 chapters with a quotation and names the poet under it, and eight more
   stand inside the prose.  The lines are centred italic like .verse; the rule
   beneath is what separates the quotation from the chapter it stands over, and
   the source is set small and spaced so that it reads as a signature rather
   than as a last line of the poem.  Measured as one block by the paginator, so
   a poet is never left stranded at the top of the following page. */
.motto {
  margin: 1.15em 8% 1.6em;
  text-indent: 0;
}
.motto-v {
  text-align: center; font-style: italic;
  font-size: .93em; line-height: 1.6; color: #4a3b28;
}
.motto-src {
  margin-top: .45em; padding-top: .4em;
  border-top: 1px solid rgba(150,124,74,.42);
  text-align: center; font-style: normal;
  font-variant: small-caps; letter-spacing: .15em; text-indent: .15em;
  font-size: .74em; color: #8a7350;
}
/* Directly under a chapter head the motto wants a little more air above it and
   a shade less below, so the quotation sits with the heading rather than
   floating between the heading and the first paragraph. */
.chead + .motto { margin-top: 1.5em; margin-bottom: 1.9em; }


/* ---------- per-page drawings ---------- */
/* The drawing fills the stage and sits under the type; the type's
   own z-index keeps it on top. */
.chapanim svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* scene 0 -- I */
.chapanim .s0-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s0-head { animation: s0Head 12.70s linear 0.30s infinite; }
@keyframes s0Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s0-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s0-ground { animation: s0Ground 15.70s linear 0.50s infinite; }
@keyframes s0Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s0-bx0 { animation: s0Bx0 5.30s ease-in-out 0.00s infinite; }
@keyframes s0Bx0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s0-bx1 { animation: s0Bx1 5.91s ease-in-out 0.22s infinite; }
@keyframes s0Bx1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s0-bx2 { animation: s0Bx2 6.52s ease-in-out 0.44s infinite; }
@keyframes s0Bx2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s0-bx3 { animation: s0Bx3 7.13s ease-in-out 0.66s infinite; }
@keyframes s0Bx3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s0-bar { stroke-dasharray: 60.5 83.5; }
.chapanim .s0-bar { animation: s0Bar 13.30s linear 0.20s infinite; }
@keyframes s0Bar { from { stroke-dashoffset: 144.0; } to { stroke-dashoffset: 0; } }

/* scene 1 -- II */
.chapanim .s1-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s1-head { animation: s1Head 12.70s linear 0.30s infinite; }
@keyframes s1Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s1-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s1-ground { animation: s1Ground 15.70s linear 0.50s infinite; }
@keyframes s1Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s1-dr0 { animation: s1Dr0 5.90s ease-in-out 0.00s infinite; }
@keyframes s1Dr0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s1-dr1 { animation: s1Dr1 6.63s ease-in-out 0.28s infinite; }
@keyframes s1Dr1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s1-dr2 { animation: s1Dr2 7.36s ease-in-out 0.56s infinite; }
@keyframes s1Dr2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s1-dr3 { animation: s1Dr3 8.09s ease-in-out 0.84s infinite; }
@keyframes s1Dr3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s1-dr4 { animation: s1Dr4 8.82s ease-in-out 1.12s infinite; }
@keyframes s1Dr4 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }

/* scene 2 -- III */
.chapanim .s2-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s2-head { animation: s2Head 12.70s linear 0.30s infinite; }
@keyframes s2Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s2-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s2-ground { animation: s2Ground 15.70s linear 0.50s infinite; }
@keyframes s2Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s2-ov { animation: s2Ov 6.70s ease-in-out 0.00s infinite; }
@keyframes s2Ov { 0%,100% { opacity:.14; } 50% { opacity:.4; } }
.chapanim .s2-a { animation: s2A 8.90s ease-in-out 0.20s infinite; }
@keyframes s2A { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s2-b { animation: s2B 10.30s ease-in-out 0.50s infinite; }
@keyframes s2B { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s2-fev { stroke-dasharray: 88.2 121.8; }
.chapanim .s2-fev { animation: s2Fev 14.10s linear 0.40s infinite; }
@keyframes s2Fev { from { stroke-dashoffset: 210.0; } to { stroke-dashoffset: 0; } }

/* scene 3 -- IV */
.chapanim .s3-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s3-head { animation: s3Head 12.70s linear 0.30s infinite; }
@keyframes s3Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s3-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s3-ground { animation: s3Ground 15.70s linear 0.50s infinite; }
@keyframes s3Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s3-tier0 { animation: s3Tier0 5.50s ease-in-out 0.00s infinite; }
@keyframes s3Tier0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-tier1 { animation: s3Tier1 6.17s ease-in-out 0.25s infinite; }
@keyframes s3Tier1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-tier2 { animation: s3Tier2 6.84s ease-in-out 0.50s infinite; }
@keyframes s3Tier2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-tier3 { animation: s3Tier3 7.51s ease-in-out 0.75s infinite; }
@keyframes s3Tier3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-bn0 { animation: s3Bn0 7.50s ease-in-out 0.00s infinite; }
@keyframes s3Bn0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-bn1 { animation: s3Bn1 8.03s ease-in-out 0.19s infinite; }
@keyframes s3Bn1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-bn2 { animation: s3Bn2 8.56s ease-in-out 0.38s infinite; }
@keyframes s3Bn2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-bn3 { animation: s3Bn3 9.09s ease-in-out 0.57s infinite; }
@keyframes s3Bn3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-bn4 { animation: s3Bn4 9.62s ease-in-out 0.76s infinite; }
@keyframes s3Bn4 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-bn5 { animation: s3Bn5 10.15s ease-in-out 0.95s infinite; }
@keyframes s3Bn5 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s3-bn6 { animation: s3Bn6 10.68s ease-in-out 1.14s infinite; }
@keyframes s3Bn6 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }

/* scene 4 -- V */
.chapanim .s4-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s4-head { animation: s4Head 12.70s linear 0.30s infinite; }
@keyframes s4Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s4-ground { animation: s4Ground 15.70s linear 0.50s infinite; }
@keyframes s4Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-cr0 { animation: s4Cr0 6.10s ease-in-out 0.00s infinite; }
@keyframes s4Cr0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s4-cr1 { animation: s4Cr1 6.57s ease-in-out 0.16s infinite; }
@keyframes s4Cr1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s4-cr2 { animation: s4Cr2 7.04s ease-in-out 0.32s infinite; }
@keyframes s4Cr2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s4-cr3 { animation: s4Cr3 7.58s ease-in-out 0.48s infinite; }
@keyframes s4Cr3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s4-cr5 { animation: s4Cr5 8.45s ease-in-out 0.80s infinite; }
@keyframes s4Cr5 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s4-cr6 { animation: s4Cr6 8.92s ease-in-out 0.96s infinite; }
@keyframes s4Cr6 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s4-cr7 { animation: s4Cr7 9.39s ease-in-out 1.12s infinite; }
@keyframes s4Cr7 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s4-cr8 { animation: s4Cr8 9.86s ease-in-out 1.28s infinite; }
@keyframes s4Cr8 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s4-wall { stroke-dasharray: 109.2 150.8; }
.chapanim .s4-wall { animation: s4Wall 16.50s linear 0.30s infinite; }
@keyframes s4Wall { from { stroke-dashoffset: 260.0; } to { stroke-dashoffset: 0; } }

/* scene 5 -- VI */
.chapanim .s5-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s5-head { animation: s5Head 12.70s linear 0.30s infinite; }
@keyframes s5Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s5-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s5-ground { animation: s5Ground 15.70s linear 0.50s infinite; }
@keyframes s5Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s5-pip { animation: s5Pip 5.70s ease-in-out 0.00s infinite; }
@keyframes s5Pip { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s5-mark { animation: s5Mark 9.10s ease-in-out 0.30s infinite; }
@keyframes s5Mark { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s5-arrow { stroke-dasharray: 86.5 119.5; }
.chapanim .s5-arrow { animation: s5Arrow 13.90s linear 0.20s infinite; }
@keyframes s5Arrow { from { stroke-dashoffset: 206.0; } to { stroke-dashoffset: 0; } }
.chapanim .s5-arc { stroke-dasharray: 90.3 124.7; }
.chapanim .s5-arc { animation: s5Arc 17.30s linear 0.60s infinite; }
@keyframes s5Arc { from { stroke-dashoffset: 215.0; } to { stroke-dashoffset: 0; } }

/* scene 6 -- VII */
.chapanim .s6-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s6-head { animation: s6Head 12.70s linear 0.30s infinite; }
@keyframes s6Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s6-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s6-ground { animation: s6Ground 15.70s linear 0.50s infinite; }
@keyframes s6Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s6-rider { transform-box: view-box; transform-origin: 200px 500px; }
.chapanim .s6-rider { animation: s6Rider 9.70s linear 0.00s infinite; }
@keyframes s6Rider { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.chapanim .s6-hub { animation: s6Hub 6.90s ease-in-out 0.20s infinite; }
@keyframes s6Hub { 0%,100% { opacity:.24; } 50% { opacity:.7; } }

/* scene 7 -- VIII */
.chapanim .s7-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s7-head { animation: s7Head 12.70s linear 0.30s infinite; }
@keyframes s7Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s7-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s7-ground { animation: s7Ground 15.70s linear 0.50s infinite; }
@keyframes s7Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s7-cup0 { animation: s7Cup0 5.10s ease-in-out 0.00s infinite; }
@keyframes s7Cup0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s7-cup1 { animation: s7Cup1 5.93s ease-in-out 0.31s infinite; }
@keyframes s7Cup1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s7-cup2 { animation: s7Cup2 6.76s ease-in-out 0.62s infinite; }
@keyframes s7Cup2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s7-cup3 { animation: s7Cup3 7.59s ease-in-out 0.93s infinite; }
@keyframes s7Cup3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s7-door { animation: s7Door 11.30s ease-in-out 0.00s infinite; }
@keyframes s7Door { 0%,100% { opacity:.1; } 50% { opacity:.34; } }
.chapanim .s7-table { stroke-dasharray: 65.5 90.5; }
.chapanim .s7-table { animation: s7Table 14.90s linear 0.40s infinite; }
@keyframes s7Table { from { stroke-dashoffset: 156.0; } to { stroke-dashoffset: 0; } }

/* scene 8 -- IX */
.chapanim .s8-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s8-head { animation: s8Head 12.70s linear 0.30s infinite; }
@keyframes s8Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s8-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s8-ground { animation: s8Ground 15.70s linear 0.50s infinite; }
@keyframes s8Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s8-nb0 { animation: s8Nb0 6.30s ease-in-out 0.00s infinite; }
@keyframes s8Nb0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s8-nb1 { animation: s8Nb1 7.01s ease-in-out 0.24s infinite; }
@keyframes s8Nb1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s8-nb2 { animation: s8Nb2 7.72s ease-in-out 0.48s infinite; }
@keyframes s8Nb2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s8-nb3 { animation: s8Nb3 8.43s ease-in-out 0.72s infinite; }
@keyframes s8Nb3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s8-pp0 { animation: s8Pp0 7.17s ease-in-out 0.00s infinite; }
@keyframes s8Pp0 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp1 { animation: s8Pp1 7.39s ease-in-out 0.11s infinite; }
@keyframes s8Pp1 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp2 { animation: s8Pp2 7.68s ease-in-out 0.22s infinite; }
@keyframes s8Pp2 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp3 { animation: s8Pp3 7.97s ease-in-out 0.33s infinite; }
@keyframes s8Pp3 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp4 { animation: s8Pp4 8.26s ease-in-out 0.44s infinite; }
@keyframes s8Pp4 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp5 { animation: s8Pp5 8.55s ease-in-out 0.55s infinite; }
@keyframes s8Pp5 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp6 { animation: s8Pp6 8.84s ease-in-out 0.66s infinite; }
@keyframes s8Pp6 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp7 { animation: s8Pp7 9.13s ease-in-out 0.77s infinite; }
@keyframes s8Pp7 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp8 { animation: s8Pp8 9.42s ease-in-out 0.88s infinite; }
@keyframes s8Pp8 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp9 { animation: s8Pp9 9.71s ease-in-out 0.99s infinite; }
@keyframes s8Pp9 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp10 { animation: s8Pp10 10.00s ease-in-out 1.10s infinite; }
@keyframes s8Pp10 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp11 { animation: s8Pp11 10.29s ease-in-out 1.21s infinite; }
@keyframes s8Pp11 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-pp12 { animation: s8Pp12 10.58s ease-in-out 1.32s infinite; }
@keyframes s8Pp12 { 0%,100% { opacity:.18; } 50% { opacity:.5; } }
.chapanim .s8-beam { stroke-dasharray: 100.8 139.2; }
.chapanim .s8-beam { animation: s8Beam 18.10s linear 0.20s infinite; }
@keyframes s8Beam { from { stroke-dashoffset: 240.0; } to { stroke-dashoffset: 0; } }

/* scene 9 -- X */
.chapanim .s9-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s9-head { animation: s9Head 12.70s linear 0.30s infinite; }
@keyframes s9Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s9-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s9-ground { animation: s9Ground 15.70s linear 0.50s infinite; }
@keyframes s9Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s9-g0 { animation: s9G0 5.37s ease-in-out 0.00s infinite; }
@keyframes s9G0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-g1 { animation: s9G1 5.73s ease-in-out 0.13s infinite; }
@keyframes s9G1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-g2 { animation: s9G2 6.16s ease-in-out 0.26s infinite; }
@keyframes s9G2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-g3 { animation: s9G3 6.59s ease-in-out 0.39s infinite; }
@keyframes s9G3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-g4 { animation: s9G4 7.02s ease-in-out 0.52s infinite; }
@keyframes s9G4 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-g5 { animation: s9G5 7.45s ease-in-out 0.65s infinite; }
@keyframes s9G5 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-g6 { animation: s9G6 7.88s ease-in-out 0.78s infinite; }
@keyframes s9G6 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-g7 { animation: s9G7 8.31s ease-in-out 0.91s infinite; }
@keyframes s9G7 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-g8 { animation: s9G8 8.74s ease-in-out 1.04s infinite; }
@keyframes s9G8 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s9-rod { stroke-dasharray: 42.0 58.0; }
.chapanim .s9-rod { animation: s9Rod 16.90s linear 0.30s infinite; }
@keyframes s9Rod { from { stroke-dashoffset: 100.0; } to { stroke-dashoffset: 0; } }

/* scene 10 -- XI */
.chapanim .s10-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s10-head { animation: s10Head 12.70s linear 0.30s infinite; }
@keyframes s10Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s10-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s10-ground { animation: s10Ground 15.70s linear 0.50s infinite; }
@keyframes s10Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s10-ray00 { animation: s10Ray00 8.10s ease-in-out 0.00s infinite; }
@keyframes s10Ray00 { 0%,100% { opacity:.16; } 50% { opacity:.46; } }
.chapanim .s10-ray10 { animation: s10Ray10 8.67s ease-in-out 0.21s infinite; }
@keyframes s10Ray10 { 0%,100% { opacity:.16; } 50% { opacity:.46; } }
.chapanim .s10-ray20 { animation: s10Ray20 9.24s ease-in-out 0.42s infinite; }
@keyframes s10Ray20 { 0%,100% { opacity:.16; } 50% { opacity:.46; } }
.chapanim .s10-ray30 { animation: s10Ray30 9.81s ease-in-out 0.63s infinite; }
@keyframes s10Ray30 { 0%,100% { opacity:.16; } 50% { opacity:.46; } }
.chapanim .s10-ray40 { animation: s10Ray40 10.38s ease-in-out 0.84s infinite; }
@keyframes s10Ray40 { 0%,100% { opacity:.16; } 50% { opacity:.46; } }
.chapanim .s10-ray50 { animation: s10Ray50 10.95s ease-in-out 1.05s infinite; }
@keyframes s10Ray50 { 0%,100% { opacity:.16; } 50% { opacity:.46; } }
.chapanim .s10-stone { animation: s10Stone 6.50s ease-in-out 0.00s infinite; }
@keyframes s10Stone { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s10-band { stroke-dasharray: 35.3 48.7; }
.chapanim .s10-band { animation: s10Band 19.30s linear 0.40s infinite; }
@keyframes s10Band { from { stroke-dashoffset: 84.0; } to { stroke-dashoffset: 0; } }

/* scene 11 -- XII */
.chapanim .s11-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s11-head { animation: s11Head 12.70s linear 0.30s infinite; }
@keyframes s11Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s11-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s11-ground { animation: s11Ground 15.70s linear 0.50s infinite; }
@keyframes s11Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s11-co0 { animation: s11Co0 5.97s ease-in-out 0.00s infinite; }
@keyframes s11Co0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s11-co1 { animation: s11Co1 6.64s ease-in-out 0.26s infinite; }
@keyframes s11Co1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s11-co2 { animation: s11Co2 7.24s ease-in-out 0.52s infinite; }
@keyframes s11Co2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s11-co3 { animation: s11Co3 7.91s ease-in-out 0.78s infinite; }
@keyframes s11Co3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s11-co4 { animation: s11Co4 8.58s ease-in-out 1.04s infinite; }
@keyframes s11Co4 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s11-co5 { animation: s11Co5 9.25s ease-in-out 1.30s infinite; }
@keyframes s11Co5 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s11-pike { stroke-dasharray: 50.4 69.6; }
.chapanim .s11-pike { animation: s11Pike 20.50s linear 0.20s infinite; }
@keyframes s11Pike { from { stroke-dashoffset: 120.0; } to { stroke-dashoffset: 0; } }

/* scene 12 -- XIII */
.chapanim .s12-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s12-head { animation: s12Head 12.70s linear 0.30s infinite; }
@keyframes s12Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s12-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s12-ground { animation: s12Ground 15.70s linear 0.50s infinite; }
@keyframes s12Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s12-strap0 { animation: s12Strap0 6.77s ease-in-out 0.00s infinite; }
@keyframes s12Strap0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s12-strap1 { animation: s12Strap1 7.49s ease-in-out 0.30s infinite; }
@keyframes s12Strap1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s12-plate { animation: s12Plate 12.10s ease-in-out 0.00s infinite; }
@keyframes s12Plate { 0%,100% { opacity:.04; } 50% { opacity:.18; } }

/* scene 13 -- XIV */
.chapanim .s13-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s13-head { animation: s13Head 12.70s linear 0.30s infinite; }
@keyframes s13Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s13-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s13-ground { animation: s13Ground 15.70s linear 0.50s infinite; }
@keyframes s13Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s13-ct0 { animation: s13Ct0 5.77s ease-in-out 0.00s infinite; }
@keyframes s13Ct0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s13-ct1 { animation: s13Ct1 6.66s ease-in-out 0.27s infinite; }
@keyframes s13Ct1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s13-ct2 { animation: s13Ct2 7.48s ease-in-out 0.54s infinite; }
@keyframes s13Ct2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s13-ct3 { animation: s13Ct3 8.37s ease-in-out 0.81s infinite; }
@keyframes s13Ct3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s13-rose { stroke-dasharray: 68.9 95.1; }
.chapanim .s13-rose { animation: s13Rose 21.10s linear 0.30s infinite; }
@keyframes s13Rose { from { stroke-dashoffset: 164.0; } to { stroke-dashoffset: 0; } }

/* scene 14 -- XV */
.chapanim .s14-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s14-head { animation: s14Head 12.70s linear 0.30s infinite; }
@keyframes s14Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s14-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s14-ground { animation: s14Ground 15.70s linear 0.50s infinite; }
@keyframes s14Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s14-pan0 { animation: s14Pan0 7.90s ease-in-out 0.00s infinite; }
@keyframes s14Pan0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s14-pan1 { animation: s14Pan1 8.87s ease-in-out 0.34s infinite; }
@keyframes s14Pan1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s14-beam { stroke-dasharray: 74.8 103.2; }
.chapanim .s14-beam { animation: s14Beam 22.90s linear 0.20s infinite; }
@keyframes s14Beam { from { stroke-dashoffset: 178.0; } to { stroke-dashoffset: 0; } }

/* scene 15 -- XVI */
.chapanim .s15-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s15-head { animation: s15Head 12.70s linear 0.30s infinite; }
@keyframes s15Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s15-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s15-ground { animation: s15Ground 15.70s linear 0.50s infinite; }
@keyframes s15Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s15-fall0 { animation: s15Fall0 5.17s ease-in-out 0.00s infinite; }
@keyframes s15Fall0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s15-fall1 { animation: s15Fall1 5.71s ease-in-out 0.20s infinite; }
@keyframes s15Fall1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s15-fall2 { animation: s15Fall2 6.32s ease-in-out 0.40s infinite; }
@keyframes s15Fall2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s15-fall3 { animation: s15Fall3 6.93s ease-in-out 0.60s infinite; }
@keyframes s15Fall3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s15-fall4 { animation: s15Fall4 7.54s ease-in-out 0.80s infinite; }
@keyframes s15Fall4 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s15-lid { animation: s15Lid 10.37s ease-in-out 0.00s infinite; }
@keyframes s15Lid { 0%,100% { opacity:.3; } 50% { opacity:.75; } }

/* scene 16 -- XVII */
.chapanim .s16-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s16-head { animation: s16Head 12.70s linear 0.30s infinite; }
@keyframes s16Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s16-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s16-ground { animation: s16Ground 15.70s linear 0.50s infinite; }
@keyframes s16Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s16-lk0 { animation: s16Lk0 6.71s ease-in-out 0.00s infinite; }
@keyframes s16Lk0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s16-lk1 { animation: s16Lk1 7.23s ease-in-out 0.25s infinite; }
@keyframes s16Lk1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s16-lk2 { animation: s16Lk2 7.96s ease-in-out 0.50s infinite; }
@keyframes s16Lk2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }

/* scene 17 -- XVIII */
.chapanim .s17-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s17-head { animation: s17Head 12.70s linear 0.30s infinite; }
@keyframes s17Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s17-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s17-ground { animation: s17Ground 15.70s linear 0.50s infinite; }
@keyframes s17Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s17-zig { animation: s17Zig 5.57s ease-in-out 0.00s infinite; }
@keyframes s17Zig { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s17-bar { animation: s17Bar 8.70s ease-in-out 0.35s infinite; }
@keyframes s17Bar { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s17-edge { stroke-dasharray: 110.9 153.1; }
.chapanim .s17-edge { animation: s17Edge 23.70s linear 0.40s infinite; }
@keyframes s17Edge { from { stroke-dashoffset: 264.0; } to { stroke-dashoffset: 0; } }

/* scene 18 -- XIX */
.chapanim .s18-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s18-head { animation: s18Head 12.70s linear 0.30s infinite; }
@keyframes s18Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s18-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s18-ground { animation: s18Ground 15.70s linear 0.50s infinite; }
@keyframes s18Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s18-jw0 { animation: s18Jw0 6.24s ease-in-out 0.00s infinite; }
@keyframes s18Jw0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s18-jw1 { animation: s18Jw1 7.08s ease-in-out 0.28s infinite; }
@keyframes s18Jw1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s18-crack { animation: s18Crack 9.50s ease-in-out 0.00s infinite; }
@keyframes s18Crack { 0%,100% { opacity:.3; } 50% { opacity:.85; } }
.chapanim .s18-rim { stroke-dasharray: 62.2 85.8; }
.chapanim .s18-rim { animation: s18Rim 24.30s linear 0.20s infinite; }
@keyframes s18Rim { from { stroke-dashoffset: 148.0; } to { stroke-dashoffset: 0; } }

/* scene 19 -- XX */
.chapanim .s19-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s19-head { animation: s19Head 12.70s linear 0.30s infinite; }
@keyframes s19Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s19-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s19-ground { animation: s19Ground 15.70s linear 0.50s infinite; }
@keyframes s19Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s19-bs0 { animation: s19Bs0 6.04s ease-in-out 0.00s infinite; }
@keyframes s19Bs0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s19-bs1 { animation: s19Bs1 6.69s ease-in-out 0.23s infinite; }
@keyframes s19Bs1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s19-bs2 { animation: s19Bs2 7.55s ease-in-out 0.46s infinite; }
@keyframes s19Bs2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s19-bs3 { animation: s19Bs3 8.27s ease-in-out 0.69s infinite; }
@keyframes s19Bs3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s19-bs4 { animation: s19Bs4 9.06s ease-in-out 0.92s infinite; }
@keyframes s19Bs4 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s19-keep { animation: s19Keep 11.70s ease-in-out 0.00s infinite; }
@keyframes s19Keep { 0%,100% { opacity:.24; } 50% { opacity:.7; } }

/* scene 20 -- XXI */
.chapanim .s20-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s20-head { animation: s20Head 12.70s linear 0.30s infinite; }
@keyframes s20Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s20-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s20-ground { animation: s20Ground 15.70s linear 0.50s infinite; }
@keyframes s20Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s20-arc0 { animation: s20Arc0 7.30s ease-in-out 0.00s infinite; }
@keyframes s20Arc0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s20-arc1 { animation: s20Arc1 8.04s ease-in-out 0.24s infinite; }
@keyframes s20Arc1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s20-arc2 { animation: s20Arc2 8.64s ease-in-out 0.48s infinite; }
@keyframes s20Arc2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s20-arc3 { animation: s20Arc3 9.31s ease-in-out 0.72s infinite; }
@keyframes s20Arc3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s20-finial { animation: s20Finial 5.44s ease-in-out 0.10s infinite; }
@keyframes s20Finial { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s20-flag { stroke-dasharray: 126.0 174.0; }
.chapanim .s20-flag { animation: s20Flag 25.10s linear 0.30s infinite; }
@keyframes s20Flag { from { stroke-dashoffset: 300.0; } to { stroke-dashoffset: 0; } }

/* scene 21 -- XXII */
.chapanim .s21-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s21-head { animation: s21Head 12.70s linear 0.30s infinite; }
@keyframes s21Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s21-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s21-ground { animation: s21Ground 15.70s linear 0.50s infinite; }
@keyframes s21Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s21-ln0 { animation: s21Ln0 6.91s ease-in-out 0.00s infinite; }
@keyframes s21Ln0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s21-ln1 { animation: s21Ln1 7.53s ease-in-out 0.26s infinite; }
@keyframes s21Ln1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s21-ln2 { animation: s21Ln2 8.36s ease-in-out 0.52s infinite; }
@keyframes s21Ln2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s21-ln3 { animation: s21Ln3 9.19s ease-in-out 0.78s infinite; }
@keyframes s21Ln3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s21-sty { stroke-dasharray: 38.6 53.4; }
.chapanim .s21-sty { animation: s21Sty 26.90s linear 0.20s infinite; }
@keyframes s21Sty { from { stroke-dashoffset: 92.0; } to { stroke-dashoffset: 0; } }

/* scene 22 -- XXIII */
.chapanim .s22-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s22-head { animation: s22Head 12.70s linear 0.30s infinite; }
@keyframes s22Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s22-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s22-ground { animation: s22Ground 15.70s linear 0.50s infinite; }
@keyframes s22Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s22-mr0 { animation: s22Mr0 5.84s ease-in-out 0.00s infinite; }
@keyframes s22Mr0 { 0%,100% { opacity:.12; } 50% { opacity:.5; } }
.chapanim .s22-mr1 { animation: s22Mr1 6.67s ease-in-out 0.33s infinite; }
@keyframes s22Mr1 { 0%,100% { opacity:.12; } 50% { opacity:.5; } }
.chapanim .s22-mr2 { animation: s22Mr2 7.64s ease-in-out 0.66s infinite; }
@keyframes s22Mr2 { 0%,100% { opacity:.12; } 50% { opacity:.5; } }
.chapanim .s22-mr3 { animation: s22Mr3 8.61s ease-in-out 0.99s infinite; }
@keyframes s22Mr3 { 0%,100% { opacity:.12; } 50% { opacity:.5; } }
.chapanim .s22-mr4 { animation: s22Mr4 9.58s ease-in-out 1.32s infinite; }
@keyframes s22Mr4 { 0%,100% { opacity:.12; } 50% { opacity:.5; } }

/* scene 23 -- XXIV */
.chapanim .s23-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s23-head { animation: s23Head 12.70s linear 0.30s infinite; }
@keyframes s23Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s23-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s23-ground { animation: s23Ground 15.70s linear 0.50s infinite; }
@keyframes s23Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s23-dr0 { animation: s23Dr0 6.37s ease-in-out 0.00s infinite; }
@keyframes s23Dr0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s23-dr1 { animation: s23Dr1 7.15s ease-in-out 0.27s infinite; }
@keyframes s23Dr1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s23-dr2 { animation: s23Dr2 7.79s ease-in-out 0.54s infinite; }
@keyframes s23Dr2 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s23-dr3 { animation: s23Dr3 8.50s ease-in-out 0.81s infinite; }
@keyframes s23Dr3 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }

/* scene 24 -- XXV */
.chapanim .s24-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s24-head { animation: s24Head 12.70s linear 0.30s infinite; }
@keyframes s24Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s24-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s24-ground { animation: s24Ground 15.70s linear 0.50s infinite; }
@keyframes s24Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s24-wv0 { stroke-dasharray: 121.8 168.2; }
.chapanim .s24-wv0 { animation: s24Wv0 8.97s linear 0.00s infinite; }
@keyframes s24Wv0 { from { stroke-dashoffset: 290.0; } to { stroke-dashoffset: 0; } }
.chapanim .s24-wv1 { stroke-dasharray: 121.8 168.2; }
.chapanim .s24-wv1 { animation: s24Wv1 10.03s linear 0.40s infinite; }
@keyframes s24Wv1 { from { stroke-dashoffset: 290.0; } to { stroke-dashoffset: 0; } }
.chapanim .s24-wv2 { stroke-dasharray: 121.8 168.2; }
.chapanim .s24-wv2 { animation: s24Wv2 11.16s linear 0.80s infinite; }
@keyframes s24Wv2 { from { stroke-dashoffset: 290.0; } to { stroke-dashoffset: 0; } }
.chapanim .s24-wv3 { stroke-dasharray: 121.8 168.2; }
.chapanim .s24-wv3 { animation: s24Wv3 12.29s linear 1.20s infinite; }
@keyframes s24Wv3 { from { stroke-dashoffset: 290.0; } to { stroke-dashoffset: 0; } }
.chapanim .s24-dyke0 { animation: s24Dyke0 7.70s ease-in-out 0.00s infinite; }
@keyframes s24Dyke0 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }
.chapanim .s24-dyke1 { animation: s24Dyke1 8.59s ease-in-out 0.31s infinite; }
@keyframes s24Dyke1 { 0%,100% { opacity:.24; } 50% { opacity:.7; } }

/* scene 25 -- XXVI */
.chapanim .s25-head { stroke-dasharray: 102.5 141.5; }
.chapanim .s25-head { animation: s25Head 12.70s linear 0.30s infinite; }
@keyframes s25Head { from { stroke-dashoffset: 244.0; } to { stroke-dashoffset: 0; } }
.chapanim .s25-ground { stroke-dasharray: 134.4 185.6; }
.chapanim .s25-ground { animation: s25Ground 15.70s linear 0.50s infinite; }
@keyframes s25Ground { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
.chapanim .s25-ry0 { animation: s25Ry0 5.24s ease-in-out 0.00s infinite; }
@keyframes s25Ry0 { 0%,100% { opacity:.14; } 50% { opacity:.52; } }
.chapanim .s25-ry1 { animation: s25Ry1 5.69s ease-in-out 0.17s infinite; }
@keyframes s25Ry1 { 0%,100% { opacity:.14; } 50% { opacity:.52; } }
.chapanim .s25-ry2 { animation: s25Ry2 6.28s ease-in-out 0.34s infinite; }
@keyframes s25Ry2 { 0%,100% { opacity:.14; } 50% { opacity:.52; } }
.chapanim .s25-ry3 { animation: s25Ry3 6.87s ease-in-out 0.51s infinite; }
@keyframes s25Ry3 { 0%,100% { opacity:.14; } 50% { opacity:.52; } }
.chapanim .s25-ry4 { animation: s25Ry4 7.46s ease-in-out 0.68s infinite; }
@keyframes s25Ry4 { 0%,100% { opacity:.14; } 50% { opacity:.52; } }
.chapanim .s25-ry5 { animation: s25Ry5 8.05s ease-in-out 0.85s infinite; }
@keyframes s25Ry5 { 0%,100% { opacity:.14; } 50% { opacity:.52; } }
.chapanim .s25-ry6 { animation: s25Ry6 8.71s ease-in-out 1.02s infinite; }
@keyframes s25Ry6 { 0%,100% { opacity:.14; } 50% { opacity:.52; } }
.chapanim .s25-sun { stroke-dasharray: 142.8 197.2; }
.chapanim .s25-sun { animation: s25Sun 27.50s linear 0.30s infinite; }
@keyframes s25Sun { from { stroke-dashoffset: 340.0; } to { stroke-dashoffset: 0; } }



/* ---------- per-page drawings ---------- */
/* The drawing fills the stage and sits under the type; the type's
   own z-index keeps it on top. */
.partart svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* scene 0 -- Dedication */
.partart .s0-lz0 { animation: s0Lz0 4.70s ease-in-out 0.30s infinite; }
@keyframes s0Lz0 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s0-crest { stroke-dasharray: 114.2 157.8; }
.partart .s0-crest { animation: s0Crest 12.77s linear 0.40s infinite; }
@keyframes s0Crest { from { stroke-dashoffset: 272.0; } to { stroke-dashoffset: 0; } }
.partart .s0-lf0 { animation: s0Lf0 5.51s ease-in-out 0.00s infinite; }
@keyframes s0Lf0 { 0%,100% { stroke-opacity:.2; } 50% { stroke-opacity:.6; } }
.partart .s0-lf1 { animation: s0Lf1 5.83s ease-in-out 0.18s infinite; }
@keyframes s0Lf1 { 0%,100% { stroke-opacity:.2; } 50% { stroke-opacity:.6; } }
.partart .s0-lf2 { animation: s0Lf2 6.36s ease-in-out 0.36s infinite; }
@keyframes s0Lf2 { 0%,100% { stroke-opacity:.2; } 50% { stroke-opacity:.6; } }
.partart .s0-lf3 { animation: s0Lf3 6.89s ease-in-out 0.54s infinite; }
@keyframes s0Lf3 { 0%,100% { stroke-opacity:.2; } 50% { stroke-opacity:.6; } }
.partart .s0-lf4 { animation: s0Lf4 7.42s ease-in-out 0.72s infinite; }
@keyframes s0Lf4 { 0%,100% { stroke-opacity:.2; } 50% { stroke-opacity:.6; } }
.partart .s0-lf5 { animation: s0Lf5 7.95s ease-in-out 0.90s infinite; }
@keyframes s0Lf5 { 0%,100% { stroke-opacity:.2; } 50% { stroke-opacity:.6; } }
.partart .s0-lf6 { animation: s0Lf6 8.48s ease-in-out 1.08s infinite; }
@keyframes s0Lf6 { 0%,100% { stroke-opacity:.2; } 50% { stroke-opacity:.6; } }
.partart .s0-tie0 { animation: s0Tie0 6.98s ease-in-out 0.00s infinite; }
@keyframes s0Tie0 { 0%,100% { stroke-opacity:.3; } 50% { stroke-opacity:.72; } }
.partart .s0-tie1 { animation: s0Tie1 7.61s ease-in-out 0.34s infinite; }
@keyframes s0Tie1 { 0%,100% { stroke-opacity:.3; } 50% { stroke-opacity:.72; } }
.partart .s0-table { stroke-dasharray: 127.7 176.3; }
.partart .s0-table { animation: s0Table 15.77s linear 0.30s infinite; }
@keyframes s0Table { from { stroke-dashoffset: 304.0; } to { stroke-dashoffset: 0; } }

/* scene 1 -- The Prince */
.partart .s1-lz0 { animation: s1Lz0 4.70s ease-in-out 0.30s infinite; }
@keyframes s1Lz0 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s1-lz1 { animation: s1Lz1 5.33s ease-in-out 0.59s infinite; }
@keyframes s1Lz1 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s1-crest { stroke-dasharray: 114.2 157.8; }
.partart .s1-crest { animation: s1Crest 12.77s linear 0.40s infinite; }
@keyframes s1Crest { from { stroke-dashoffset: 272.0; } to { stroke-dashoffset: 0; } }
.partart .s1-pk0 { animation: s1Pk0 6.11s ease-in-out 0.00s infinite; }
@keyframes s1Pk0 { 0%,100% { fill-opacity:.06; } 50% { fill-opacity:.3; } }
.partart .s1-pk1 { animation: s1Pk1 6.78s ease-in-out 0.21s infinite; }
@keyframes s1Pk1 { 0%,100% { fill-opacity:.06; } 50% { fill-opacity:.3; } }
.partart .s1-pk2 { animation: s1Pk2 7.31s ease-in-out 0.42s infinite; }
@keyframes s1Pk2 { 0%,100% { fill-opacity:.06; } 50% { fill-opacity:.3; } }
.partart .s1-pk3 { animation: s1Pk3 7.98s ease-in-out 0.63s infinite; }
@keyframes s1Pk3 { 0%,100% { fill-opacity:.06; } 50% { fill-opacity:.3; } }
.partart .s1-pk4 { animation: s1Pk4 8.65s ease-in-out 0.84s infinite; }
@keyframes s1Pk4 { 0%,100% { fill-opacity:.06; } 50% { fill-opacity:.3; } }
.partart .s1-pk5 { animation: s1Pk5 9.32s ease-in-out 1.05s infinite; }
@keyframes s1Pk5 { 0%,100% { fill-opacity:.06; } 50% { fill-opacity:.3; } }
.partart .s1-pk6 { animation: s1Pk6 9.92s ease-in-out 1.26s infinite; }
@keyframes s1Pk6 { 0%,100% { fill-opacity:.06; } 50% { fill-opacity:.3; } }
.partart .s1-band { stroke-dasharray: 168.0 232.0; }
.partart .s1-band { animation: s1Band 17.37s linear 0.50s infinite; }
@keyframes s1Band { from { stroke-dashoffset: 400.0; } to { stroke-dashoffset: 0; } }

/* scene 2 -- The Duke Valentino */
.partart .s2-lz0 { animation: s2Lz0 4.70s ease-in-out 0.30s infinite; }
@keyframes s2Lz0 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s2-lz1 { animation: s2Lz1 5.33s ease-in-out 0.59s infinite; }
@keyframes s2Lz1 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s2-lz2 { animation: s2Lz2 5.96s ease-in-out 0.88s infinite; }
@keyframes s2Lz2 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s2-crest { stroke-dasharray: 114.2 157.8; }
.partart .s2-crest { animation: s2Crest 12.77s linear 0.40s infinite; }
@keyframes s2Crest { from { stroke-dashoffset: 272.0; } to { stroke-dashoffset: 0; } }
.partart .s2-wv0 { stroke-dasharray: 126.0 174.0; }
.partart .s2-wv0 { animation: s2Wv0 9.77s linear 0.00s infinite; }
@keyframes s2Wv0 { from { stroke-dashoffset: 300.0; } to { stroke-dashoffset: 0; } }
.partart .s2-wv1 { stroke-dasharray: 126.0 174.0; }
.partart .s2-wv1 { animation: s2Wv1 11.01s linear 0.40s infinite; }
@keyframes s2Wv1 { from { stroke-dashoffset: 300.0; } to { stroke-dashoffset: 0; } }
.partart .s2-wv2 { stroke-dasharray: 126.0 174.0; }
.partart .s2-wv2 { animation: s2Wv2 12.32s linear 0.80s infinite; }
@keyframes s2Wv2 { from { stroke-dashoffset: 300.0; } to { stroke-dashoffset: 0; } }
.partart .s2-ar0 { animation: s2Ar0 6.85s ease-in-out 0.00s infinite; }
@keyframes s2Ar0 { 0%,100% { stroke-opacity:.16; } 50% { stroke-opacity:.5; } }
.partart .s2-ar1 { animation: s2Ar1 7.33s ease-in-out 0.27s infinite; }
@keyframes s2Ar1 { 0%,100% { stroke-opacity:.16; } 50% { stroke-opacity:.5; } }
.partart .s2-ar2 { animation: s2Ar2 8.16s ease-in-out 0.54s infinite; }
@keyframes s2Ar2 { 0%,100% { stroke-opacity:.16; } 50% { stroke-opacity:.5; } }
.partart .s2-gate { animation: s2Gate 9.04s ease-in-out 0.20s infinite; }
@keyframes s2Gate { 0%,100% { fill-opacity:.04; } 50% { fill-opacity:.24; } }
.partart .s2-deck { stroke-dasharray: 107.5 148.5; }
.partart .s2-deck { animation: s2Deck 19.70s linear 0.30s infinite; }
@keyframes s2Deck { from { stroke-dashoffset: 256.0; } to { stroke-dashoffset: 0; } }

/* scene 3 -- Castruccio Castracani */
.partart .s3-lz0 { animation: s3Lz0 4.70s ease-in-out 0.30s infinite; }
@keyframes s3Lz0 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s3-lz1 { animation: s3Lz1 5.33s ease-in-out 0.59s infinite; }
@keyframes s3Lz1 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s3-lz2 { animation: s3Lz2 5.96s ease-in-out 0.88s infinite; }
@keyframes s3Lz2 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s3-lz3 { animation: s3Lz3 6.73s ease-in-out 1.17s infinite; }
@keyframes s3Lz3 { 0%,100% { fill-opacity:.22; } 50% { fill-opacity:.72; } }
.partart .s3-crest { stroke-dasharray: 114.2 157.8; }
.partart .s3-crest { animation: s3Crest 12.77s linear 0.40s infinite; }
@keyframes s3Crest { from { stroke-dashoffset: 272.0; } to { stroke-dashoffset: 0; } }
.partart .s3-Cuff0 { animation: s3Cuff0 7.57s ease-in-out 0.00s infinite; }
@keyframes s3Cuff0 { 0%,100% { stroke-opacity:.3; } 50% { stroke-opacity:.75; } }
.partart .s3-Cuff1 { animation: s3Sync 7.57s ease-in-out 0.22s infinite; }
.partart .s3-Bar { animation: s3Sync 7.57s ease-in-out 0.44s infinite; }
@keyframes s3Sync { 0%,100% { stroke-opacity:.3; } 50% { stroke-opacity:.75; } }
.partart .s3-wall { stroke-dasharray: 117.6 162.4; }
.partart .s3-wall { animation: s3Wall 21.17s linear 0.30s infinite; }
@keyframes s3Wall { from { stroke-dashoffset: 280.0; } to { stroke-dashoffset: 0; } }
.partart .s3-floor { stroke-dasharray: 121.0 167.0; }
.partart .s3-floor { animation: s3Floor 22.97s linear 0.60s infinite; }
@keyframes s3Floor { from { stroke-dashoffset: 288.0; } to { stroke-dashoffset: 0; } }



/* prince cover. Scoped under .cover-front. */

/* The reset every illustrated cover needs. Without it the engine
   keeps its own 3px double gold border at inset 7%, which the
   600x820 artwork overflows, and keeps rendering .cover-sub from
   the book config, whose  -joined words cannot wrap and run
   off both edges. The SVG sets its own lettering. */
.cover-front .cover-frame { padding: 0; border: 0; }
.cover-front .cover-title { width: 100%; font-size: 1em; letter-spacing: 0; text-shadow: none; }
.cover-front svg.cvsvg { width: 100%; height: auto; display: block; }
.cover-front .cover-orn, .cover-front .cover-sub, .cover-front .cover-author { display: none; }

/* The engine also stamps an embossed border of its own on every
   cover: .cover-inner::before repeats a diamond band along all
   four edges at 2.2% inset, and ::after sets rosettes in the four
   corners at 1.4%. Both are drawn as a dark copy offset against a
   light one -- the emboss technique. On a full-bleed illustration
   that reads as a frame the art is trapped inside, so it is off
   here. The back cover keeps it. */
.cover-front .cover-inner::before,
.cover-front .cover-inner::after { display: none; }

.cover-front .cvsvg text { font-family: Georgia,'Times New Roman',serif; text-anchor: middle; }

.cover-front, .cover-back { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.055), rgba(255,255,255,0) 55%), linear-gradient(135deg, #16332a 0%, #1d4035 46%, #16332a 100%); }
.cover-front .pr-leg-a { transform-box: view-box; transform-origin: 300px 392px; }
.cover-front .pr-leg-b { transform-box: view-box; transform-origin: 300px 392px; }
.cover-front .pr-leg-a { animation: prLegA 5.30s cubic-bezier(.5,.02,.4,1) 0.00s infinite; }
@keyframes prLegA { 0%,30%{transform:rotate(0deg)} 50%,70%{transform:rotate(11.5deg)} 100%{transform:rotate(0deg)} }
.cover-front .pr-leg-b { animation: prLegB 5.30s ease-out 0.00s infinite; }
@keyframes prLegB { 0%,30%{transform:rotate(0deg)} 50%,70%{transform:rotate(-11.5deg)} 100%{transform:rotate(0deg)} }
.cover-front .pr-head { animation: prHead 5.30s ease-out 0.00s infinite; }
@keyframes prHead { 0%,30%{transform:translateY(0px)} 50%,70%{transform:translateY(-9px)} 100%{transform:translateY(0px)} }
.cover-front .pr-plan { animation: prPlan 5.30s ease-out 0.00s infinite; }
@keyframes prPlan { 0%,32%{transform:translateX(0px)} 74%,100%{transform:translateX(-104px)} }
.cover-front .pr-lit.l0 { animation: prLit 5.30s ease-out 0.00s infinite; }
@keyframes prLit { 0%,8%{opacity:0} 20%{opacity:.8} 30%{opacity:.8} 40%,100%{opacity:0} }
.cover-front .pr-lit.l1 { animation: prLit 5.30s ease-out 0.00s infinite; }
@keyframes prLit { 0%,8%{opacity:0} 20%{opacity:.8} 30%{opacity:.8} 40%,100%{opacity:0} }
.cover-front .pr-lit.l2 { animation: prLit 5.30s ease-out 0.00s infinite; }
@keyframes prLit { 0%,8%{opacity:0} 20%{opacity:.8} 30%{opacity:.8} 40%,100%{opacity:0} }
.cover-front .pr-lit.l3 { animation: prLit 5.30s ease-out 0.00s infinite; }
@keyframes prLit { 0%,8%{opacity:0} 20%{opacity:.8} 30%{opacity:.8} 40%,100%{opacity:0} }
.cover-front .pr-lit.l4 { animation: prLit 5.30s ease-out 0.00s infinite; }
@keyframes prLit { 0%,8%{opacity:0} 20%{opacity:.8} 30%{opacity:.8} 40%,100%{opacity:0} }
.cover-front .pr-lit.l5 { animation: prLit 5.30s ease-out 0.00s infinite; }
@keyframes prLit { 0%,8%{opacity:0} 20%{opacity:.8} 30%{opacity:.8} 40%,100%{opacity:0} }
.cover-front .pr-lit.l6 { animation: prLit 5.30s ease-out 0.00s infinite; }
@keyframes prLit { 0%,8%{opacity:0} 20%{opacity:.8} 30%{opacity:.8} 40%,100%{opacity:0} }
.cover-front .pr-bay.b0 { animation: prBay0 9.70s ease-in-out 0.00s infinite; }
@keyframes prBay0 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.7} }
.cover-front .pr-bay.b1 { animation: prBay1 10.53s ease-in-out 0.29s infinite; }
@keyframes prBay1 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.7} }
.cover-front .pr-bay.b2 { animation: prBay2 11.36s ease-in-out 0.58s infinite; }
@keyframes prBay2 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.7} }
.cover-front .pr-bay.b3 { animation: prBay3 12.19s ease-in-out 0.87s infinite; }
@keyframes prBay3 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.7} }
.cover-front .pr-bay.b4 { animation: prBay4 13.02s ease-in-out 1.16s infinite; }
@keyframes prBay4 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.7} }
.cover-front .pr-bay.b5 { animation: prBay5 13.85s ease-in-out 1.45s infinite; }
@keyframes prBay5 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.7} }
.cover-front .pr-bay.b6 { animation: prBay6 14.68s ease-in-out 1.74s infinite; }
@keyframes prBay6 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.7} }
.cover-front .pr-pt0 { animation: prPt0 5.90s ease-in-out 0.00s infinite; }
@keyframes prPt0 { 0%,100%{opacity:.7} 50%{opacity:1} }
.cover-front .pr-pt1 { animation: prPt1 6.87s ease-in-out 0.40s infinite; }
@keyframes prPt1 { 0%,100%{opacity:.7} 50%{opacity:1} }
.cover-front .pr-corner.c0 { animation: prCorner0 12.10s ease-in-out 0.00s infinite; }
@keyframes prCorner0 { 0%,100%{opacity:.56} 50%{opacity:1} }
.cover-front .pr-corner.c1 { animation: prCorner1 13.70s ease-in-out 0.70s infinite; }
@keyframes prCorner1 { 0%,100%{opacity:.56} 50%{opacity:1} }
.cover-front .pr-corner.c2 { animation: prCorner2 16.50s ease-in-out 1.40s infinite; }
@keyframes prCorner2 { 0%,100%{opacity:.56} 50%{opacity:1} }
.cover-front .pr-corner.c3 { animation: prCorner3 17.30s ease-in-out 2.10s infinite; }
@keyframes prCorner3 { 0%,100%{opacity:.56} 50%{opacity:1} }
.cover-front .pr-mote.m0 { animation: prMote0 18.10s ease-in-out 0.00s infinite; }
@keyframes prMote0 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.5} 58%{transform:translate(-9px,-17px);opacity:.38} 84%{transform:translate(6px,-30px);opacity:.22} }
.cover-front .pr-mote.m1 { animation: prMote1 19.70s ease-in-out 1.10s infinite; }
@keyframes prMote1 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.5} 58%{transform:translate(-9px,-17px);opacity:.38} 84%{transform:translate(6px,-30px);opacity:.22} }
.cover-front .pr-mote.m2 { animation: prMote2 21.10s ease-in-out 2.20s infinite; }
@keyframes prMote2 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.5} 58%{transform:translate(-9px,-17px);opacity:.38} 84%{transform:translate(6px,-30px);opacity:.22} }
.cover-front .pr-mote.m3 { animation: prMote3 22.90s ease-in-out 3.30s infinite; }
@keyframes prMote3 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.5} 58%{transform:translate(-9px,-17px);opacity:.38} 84%{transform:translate(6px,-30px);opacity:.22} }
.cover-front .t0 { opacity:0; animation: cvT0 1.00s cubic-bezier(.22,.9,.3,1) 0.30s both; }
@keyframes cvT0 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .t1 { opacity:0; animation: cvT1 1.00s cubic-bezier(.22,.9,.3,1) 0.50s both; }
@keyframes cvT1 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .rul { opacity:0; animation: cvRule 0.90s ease-out 0.70s both; }
@keyframes cvRule { from { opacity:0; transform:scaleX(.06); } to { opacity:.9; transform:none; } }
.cover-front .rul { transform-origin:center; }
.cover-front .byl { opacity:0; animation: cvByl 1.20s ease-out 2.60s both; }
@keyframes cvByl { from { opacity:0; } to { opacity:1; } }
.cover-front .ftr { opacity:0; animation: cvFtr 1.20s ease-out 3.00s both; }
@keyframes cvFtr { from { opacity:0; } to { opacity:1; } }
.cover-front .r2 { animation: cvRuleGlow 14.30s ease-in-out 1.40s infinite; }
@keyframes cvRuleGlow { 0%,100% { stroke-opacity:.75; } 50% { stroke-opacity:1; } }
.cover-front .d0 { animation: cvDot0 6.40s ease-in-out 1.10s infinite; }
@keyframes cvDot0 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d1 { animation: cvDot1 7.23s ease-in-out 1.57s infinite; }
@keyframes cvDot1 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d2 { animation: cvDot2 8.06s ease-in-out 2.04s infinite; }
@keyframes cvDot2 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d3 { animation: cvDot3 8.89s ease-in-out 2.51s infinite; }
@keyframes cvDot3 { 0%,100% { opacity:.6; } 50% { opacity:1; } }