:root { color-scheme: light dark; }
html, body { margin: 0; min-height: 100%; }
body { background: #2d3774; }
body > div { position: relative; height: 100dvh; padding: 0 !important; }
body > div > .screen {
  max-width: none !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #fcb61e; outline-offset: 3px; }
button:disabled { opacity: .52; cursor: not-allowed; }
#catrrp-home-sketch .books, #catrrp-category-sketch .books,
#catrrp-age-sketch .books, #catrrp-author-browse-sketch .books {
  align-items: start;
  justify-items: center;
  grid-auto-rows: 1fr;
}
#catrrp-home-sketch .books .book, #catrrp-category-sketch .books .book,
#catrrp-age-sketch .books .book, #catrrp-author-browse-sketch .books .book {
  display: grid;
  grid-template-rows: var(--cover-row, 160px) 48px auto;
  align-content: start;
  align-self: stretch;
  width: min(100%, 150px);
}
#catrrp-category-sketch .books .book, #catrrp-age-sketch .books .book,
#catrrp-author-browse-sketch .books .book { --cover-row: 178px; }
#catrrp-home-sketch .books .cover, #catrrp-category-sketch .books .cover,
#catrrp-age-sketch .books .cover, #catrrp-author-browse-sketch .books .cover { margin-bottom: 0; }
#catrrp-home-sketch .books .book strong, #catrrp-category-sketch .books .book strong,
#catrrp-age-sketch .books .book strong, #catrrp-author-browse-sketch .books .book strong {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.preview-passcode-note { position: fixed; z-index: 10; left: 12px; right: 12px; bottom: 8px; margin: 0; color: #fff; font: 13px/1.3 -apple-system, BlinkMacSystemFont, sans-serif; text-align: center; }
.preview-empty { max-width: 32rem; padding: 18px; color: #52616b; font-size: 16px; }
.author-link { padding: 0; border: 0; color: #397b71; background: none; font: inherit; font-weight: 700; text-decoration: underline; }

.signup-scrim[hidden], .signup-sheet[hidden] { display: none; }
.signup-scrim { position: fixed; z-index: 20; inset: 0; background: #081c20a3; backdrop-filter: blur(4px); animation: signup-scrim-in 220ms ease-out; }
.signup-sheet { position: fixed; z-index: 21; bottom: var(--keyboard-inset, 0px); left: 50%; width: min(980px, calc(100% - 24px)); max-height: min(calc(var(--visible-height, 100dvh) - 12px), calc(100dvh - 12px)); overflow-y: auto; padding: 12px 26px 24px; box-sizing: border-box; transform: translateX(-50%); border: 1px solid light-dark(#ffffffec,#ffffff42); border-bottom: 0; border-radius: 26px 26px 0 0; color: light-dark(#25313c,#f5f7f6); background: light-dark(#f6faf8f5,#253b3af5); box-shadow: 0 -12px 40px #061c2047, inset 0 1px #ffffffba; backdrop-filter: blur(24px) saturate(140%); font: 400 16px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; animation: signup-sheet-in 220ms ease-out; }
.signup-sheet.is-keyboard-active { top: calc(var(--viewport-top, 0px) + 12px); bottom: auto; max-height: calc(var(--visible-height, 100dvh) - 24px); }
.signup-layout { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr); gap: 28px; align-items: start; }
.signup-sheet.is-closing { animation: signup-sheet-out 220ms ease-in forwards; }
.signup-scrim.is-closing { animation: signup-scrim-out 220ms ease-in forwards; }
.signup-handle { display: grid; place-items: center; width: 80px; height: 44px; padding: 0; margin: -8px auto 2px; border: 0; background: transparent; }
.signup-handle::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 99px; background: light-dark(#aebdb9,#9bb4ae); }
.signup-top h2 { margin: 0; font-size: 25px; line-height: 1.15; }
.signup-intro { margin: 8px 0 0; color: light-dark(#52616b,#d2dfda); }
.signup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signup-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.signup-field input { width: 100%; min-height: 48px; padding: 10px 14px; box-sizing: border-box; border: 1px solid light-dark(#c8d6d1,#8fa39e); border-radius: 14px; color: inherit; background: light-dark(#ffffffed,#ffffff18); font: inherit; font-size: 16px; }
.signup-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; font-size: 14px; }
.signup-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #397b71; }
.signup-privacy { margin: 8px 0 6px; color: light-dark(#52616b,#d2dfda); font-size: 13px; }
.preview-notice { margin: 0 0 4px; color: light-dark(#6b3966,#f0cae9); font-size: 13px; font-weight: 700; }
.signup-bottom { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 58px; padding: 5px 0 4px; background: light-dark(#f6faf8f5,#253b3af5); }
.signup-status { color: light-dark(#245d54,#d9f3e9); font-size: 13px; }
.signup-save { min-width: 148px; min-height: 48px; padding: 10px 22px; border: 1px solid #2d3774; border-radius: 999px; color: #fff; background: #2d3774; box-shadow: 0 6px 18px #1b35522b; font: inherit; font-weight: 700; white-space: nowrap; transition: min-width 180ms ease, border-radius 180ms ease, background-color 180ms ease; }
.signup-save.is-success { width: 48px; min-width: 48px; padding: 10px; border-color: #397b71; border-radius: 50%; background: #397b71; opacity: 1; }
@keyframes signup-sheet-in { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes signup-sheet-out { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 100%); } }
@keyframes signup-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes signup-scrim-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 680px) {
  body > div { height: auto; min-height: 100dvh; }
  body > div > .screen { height: auto !important; min-height: 100dvh !important; }
  .signup-layout, .signup-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .signup-sheet, .signup-scrim { animation: none !important; }
  .signup-save { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .signup-scrim, .signup-sheet { backdrop-filter: none; }
  .signup-sheet { background: light-dark(#f6faf8,#253b3a); }
}