/* Last-loaded layout */
html body .book-card-header-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.45rem !important;
}
html body .book-card-header-hit {
display: flex !important;
align-items: center !important;
min-height: 1.94rem !important;
}
html body .book-card-title {
margin: 0 !important;
line-height: 1.05 !important;
}
html body .book-card-author {
margin: 0.12rem 0 0 !important;
padding: 0 !important;
font-size: 0.72rem !important;
line-height: 1.25 !important;
color: var(--color-muted) !important;
}
html body .moss-lib-page.is-searching {
padding-bottom: 0.4rem !important;
min-height: 0 !important;
gap: 0.55rem !important;
}
html body .moss-lib-page.is-searching .moss-lib-authors,
html body .moss-lib-page.is-searching .moss-lib-author,
html body .moss-lib-page.is-searching .moss-lib-author:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
html body .moss-lib-end-spacer,
html body .moss-lib-end-spacer.is-search {
display: block !important;
width: 100% !important;
height: 0.4rem !important;
min-height: 0 !important;
flex: 0 0 auto !important;
pointer-events: none !important;
}
html body .moss-app-main:has(.moss-lib-page.is-searching) {
padding-bottom: 0.4rem !important;
}
@media (min-width: 980px) {
html body .book-switcher,
html body .book-switcher.is-desktop-pinned {
--moss-desk-nav: 15.25rem;
width: 100% !important;
max-width: none !important;
padding-inline: 1.25rem !important;
padding-top: 0.55rem !important;
margin-top: 0 !important;
}
html body .moss-desk-banner-stack,
html body [data-moss-banner-stack] {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 0.55rem !important;
z-index: 20 !important;
}
html body .book-switcher .series-top-row,
html body .book-switcher .series-scroll,
html body .book-switcher .series-right {
display: flex !important;
flex-direction: row !important;
position: static !important;
inset: auto !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
html body .book-switcher .series-layout,
html body .book-switcher.is-desktop-pinned .series-layout {
display: grid !important;
flex-direction: unset !important;
grid-template-columns: 15.25rem minmax(0, 1fr) 18.5rem !important;
grid-template-rows: minmax(0, 1fr) !important;
column-gap: 0.75rem !important;
align-items: stretch !important;
min-height: 0 !important;
height: auto !important;
}
html body .book-switcher .series-nav,
html body .book-switcher .series-nav.is-phone-fixed,
html body .book-switcher.is-desktop-pinned .series-nav,
html body .book-switcher.is-studio .series-nav,
html body .book-switcher.is-studio.is-desktop-pinned .series-nav {
grid-column: 1 !important;
grid-row: 1 !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
align-self: stretch !important;
overflow: hidden !important;
}
html body .book-switcher .series-main {
grid-column: 2 !important;
grid-row: 1 !important;
height: auto !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
}
html body .book-switcher .series-main-stack {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
}
html body .book-switcher .series-main-stack > .book-card,
html body .book-switcher .series-main-stack > .author-card-anchor {
width: 100% !important;
max-width: none !important;
height: auto !important;
}
html body .book-switcher .series-main-stack .book-card-cover-wrap,
html body .book-switcher .series-main-stack .book-card-cover {
aspect-ratio: 16 / 9 !important;
}
html body .book-switcher .book-switcher-chapters,
html body .book-switcher.is-desktop-pinned .book-switcher-chapters {
grid-column: 3 !important;
grid-row: 1 !important;
height: auto !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
html body .book-switcher .chapters-panel-heading {
position: sticky !important;
top: 0 !important;
z-index: 8 !important;
background: #0c100b !important;
padding-bottom: 0.5rem !important;
}
html body .moss-header-tabs,
html body .moss-header-tabs-host {
display: none !important;
}
html body .moss-bottom-nav {
display: flex !important;
justify-content: center !important;
pointer-events: none !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
html body .moss-bottom-nav-inner {
pointer-events: auto !important;
}
}
html body .moss-desk-banner-stack,
html body [data-moss-banner-stack] {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
z-index: 20 !important;
display: block !important;
margin: 0 0 0.55rem !important;
padding: 0.15rem 0 0 !important;
pointer-events: auto !important;
box-sizing: border-box !important;
background: transparent !important;
box-shadow: none !important;
}
html body .moss-desk-banner-stack > *,
html body [data-moss-banner-stack] > * { pointer-events: auto !important; }
html body .moss-desk-banner-stack:not(:has(.moss-guest-banner, .moss-conn-banner, .library-length-banner, .moss-desk-notify, .book-continue-wrap, .book-continue-btn)),
html body [data-moss-banner-stack]:not(:has(.moss-guest-banner, .moss-conn-banner, .library-length-banner, .moss-desk-notify, .book-continue-wrap, .book-continue-btn)) {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body .moss-desk-banner-stack:has(.library-length-banner),
html body .moss-desk-banner-stack:has(.moss-guest-banner),
html body .moss-desk-banner-stack:has(.moss-conn-banner),
html body .moss-desk-banner-stack:has(.moss-desk-notify),
html body .moss-desk-banner-stack:has(.book-continue-wrap),
html body .moss-desk-banner-stack:has(.book-continue-btn),
html body [data-moss-banner-stack]:has(.library-length-banner),
html body [data-moss-banner-stack]:has(.moss-guest-banner),
html body [data-moss-banner-stack]:has(.moss-conn-banner),
html body [data-moss-banner-stack]:has(.moss-desk-notify),
html body [data-moss-banner-stack]:has(.book-continue-wrap),
html body [data-moss-banner-stack]:has(.book-continue-btn) {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
z-index: 20 !important;
display: block !important;
pointer-events: auto !important;
margin: 0 0 0.55rem !important;
padding: 0.15rem 0 0 !important;
box-sizing: border-box !important;
background: transparent !important;
box-shadow: none !important;
}
@media (max-width: 979px) {
html body .moss-header-tabs,
html body .moss-header-tabs-host { display: none !important; }
html body .header-action-slot[data-slot="mode"] {
display: inline-flex !important;
order: 40 !important;
}
html body .header-action-slot[data-slot="profile"] {
display: inline-flex !important;
order: 50 !important;
}
html body .moss-app-header-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.35rem !important;
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-top: 0.7rem !important;
padding-bottom: 0.7rem !important;
padding-inline: max(0.5rem, env(safe-area-inset-left, 0px))
max(0.5rem, env(safe-area-inset-right, 0px)) !important;
}
html body .moss-app-header {
padding-inline: 0 !important;
}
html body .moss-app-header-end {
gap: 0.28rem !important;
margin-left: auto !important;
}
html body .moss-app-header .header-actions {
gap: 0 !important;
padding: 0.1rem !important;
}
html body .moss-app-header .header-tool-btn {
width: 2.05rem !important;
min-width: 2.05rem !important;
height: 2.05rem !important;
}
html body .moss-app-header-inner h1 {
font-size: 0.98rem !important;
line-height: 1.15 !important;
}
html body .moss-app-header .moss-app-header-inner > div:first-child img,
html body .moss-app-header img[alt="Moss Chapter"] {
width: 2.25rem !important;
height: 2.25rem !important;
min-width: 2.25rem !important;
border-radius: 28% !important;
object-fit: cover !important;
}
html body .header-action-slot[data-slot="profile"] .header-tool-btn {
overflow: visible !important;
border-radius: 999px !important;
}
html body .header-action-slot[data-slot="profile"] .header-tool-btn img,
html body .header-action-slot[data-slot="profile"] .header-tool-btn span {
width: 1.55rem !important;
height: 1.55rem !important;
border-radius: 999px !important;
object-fit: cover !important;
}
html body .book-switcher:not(.is-empty-layout) .series-layout {
padding-top: 0 !important;
column-gap: 0.65rem !important;
}
html body .book-switcher:not(.is-empty-layout) .series-top-row {
display: grid !important;
grid-template-columns: var(--moss-nav-col, 7.35rem) minmax(0, 1fr) !important;
column-gap: 0.55rem !important;
align-items: start !important;
padding-top: 0 !important;
padding-left: 0 !important;
width: 100% !important;
}
html body .book-switcher:not(.is-empty-layout) .series-main,
html body .book-switcher:not(.is-empty-layout) .book-switcher-chapters {
min-width: 0 !important;
max-width: 100% !important;
padding-left: 0 !important;
box-sizing: border-box !important;
}
html body .book-switcher:not(.is-empty-layout) .series-nav,
html body .book-switcher:not(.is-empty-layout) .series-nav.is-phone-fixed {
position: sticky !important;
top: 0.35rem !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
align-self: start !important;
height: var(
--series-nav-stick-h,
calc(
100svh - var(--moss-header-h, 3.7rem) - var(--moss-banner-h, 4.25rem) -
var(--moss-player-h, 17rem) - 0.85rem
)
) !important;
min-height: 16rem !important;
max-height: var(
--series-nav-stick-h,
calc(
100svh - var(--moss-header-h, 3.7rem) - var(--moss-banner-h, 4.25rem) -
var(--moss-player-h, 17rem) - 0.85rem
)
) !important;
}
html body .book-switcher:not(.is-empty-layout) .book-switcher-chapters {
width: 100% !important;
padding: 0 0 0.75rem !important;
}
}
html body .moss-sheet .moss-inbox-tabs.is-three {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html body .moss-sheet .moss-inbox-tabs.is-three .moss-inbox-tab {
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.16rem !important;
min-width: 0 !important;
padding: 0.28rem 0.12rem !important;
font-size: 0.68rem !important;
}
html body .header-tool-badge--dot {
top: 0.26rem !important;
right: 0.24rem !important;
width: 0.4rem !important;
min-width: 0.4rem !important;
height: 0.4rem !important;
padding: 0 !important;
border: 1.5px solid var(--color-bg, #0c100b) !important;
border-radius: 999px !important;
background: var(--color-primary) !important;
color: transparent !important;
font-size: 0 !important;
}
html body .moss-account-menu {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
z-index: 720 !important;
}
html body .moss-account-menu-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html body .moss-account-menu-foot {
flex: 0 0 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 0.08rem !important;
margin-top: 0.2rem !important;
padding-top: 0.2rem !important;
border-top: 1px solid color-mix(in oklab, var(--color-gold) 16%, transparent) !important;
}
html body .moss-account-menu-item {
min-height: 1.85rem !important;
padding: 0.28rem 0.5rem !important;
}
html body .moss-account-menu-item.is-danger,
html body .moss-account-menu-item.is-danger span,
html body .moss-account-menu-item.is-danger .moss-account-menu-item-icon {
color: #e07a6a !important;
}
html body .moss-delete-account-sheet .moss-danger-btn {
color: #e07a6a !important;
background: rgba(224, 122, 106, 0.18) !important;
border: 1px solid rgba(224, 122, 106, 0.4) !important;
}
html body .book-card-tap-hint,
html body .moss-author-card-tap-hint {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
margin: 0 !important;
padding: 0.06rem 0 0.02rem !important;
border: 0 !important;
color: var(--color-gold) !important;
font-size: 0.58rem !important;
font-weight: 650 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
html body .book-card-tap-hint-label {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 0.22rem !important;
white-space: nowrap !important;
}
html body .book-card-tap-hint-icon {
display: block !important;
width: 0.68rem !important;
height: 0.68rem !important;
flex: 0 0 auto !important;
}
html body .book-card-tap-hint::before,
html body .book-card-tap-hint::after,
html body .moss-author-card-tap-hint::before,
html body .moss-author-card-tap-hint::after {
display: none !important;
content: none !important;
}
html body .moss-author-card:not(.is-desktop-open):not(.is-expanded),
html body .book-switcher:not(.is-empty-layout) .moss-author-card:not(.is-desktop-open):not(.is-expanded) {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0.36rem 0.62rem 0.08rem !important;
}
html body .moss-author-card:not(.is-desktop-open) .moss-author-card-lead {
display: flex !important;
flex-direction: column !important;
flex: 0 0 auto !important;
min-height: 0 !important;
gap: 0 !important;
margin: 0 !important;
}
html body .moss-author-card:not(.is-desktop-open) .moss-author-card-body {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 0.12rem !important;
min-width: 0 !important;
}
html body .moss-author-card:not(.is-desktop-open) .moss-author-card-bio {
margin: 0 !important;
padding: 0 !important;
}
html body .moss-author-card:not(.is-desktop-open) .moss-author-card-tap-hint {
justify-content: center !important;
width: 100% !important;
margin: 0.1rem 0 0 !important;
padding: 0 !important;
}
/* Reviews / stats — compact readable */
html body .moss-stats-tabs {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 0.2rem !important;
margin: 0 0 0.75rem !important;
padding: 0.18rem !important;
border: 1px solid #e6c99a24 !important;
border-radius: 0.75rem !important;
background: #0c100b8c !important;
}
html body .moss-stats-tab {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.28rem !important;
min-height: 1.95rem !important;
border: 0 !important;
border-radius: 0.58rem !important;
background: transparent !important;
color: var(--color-muted) !important;
font-size: 0.72rem !important;
font-weight: 650 !important;
}
html body .moss-stats-tab.is-on {
color: var(--color-fg) !important;
background: color-mix(in oklab, var(--color-primary) 16%, transparent) !important;
}
html body .moss-stats-book-filter {
display: flex !important;
align-items: center !important;
gap: 0.45rem !important;
margin: 0 0 0.65rem !important;
color: var(--color-muted) !important;
font-size: 0.68rem !important;
font-weight: 650 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
html body .moss-stats-book-filter select {
flex: 1 !important;
min-height: 2rem !important;
padding: 0 0.55rem !important;
border: 1px solid #e6c99a29 !important;
border-radius: 0.55rem !important;
background: #0c100b73 !important;
color: var(--color-fg) !important;
font-size: 0.78rem !important;
font-weight: 550 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
html body .moss-stats-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.45rem !important;
}
html body .moss-stats-card {
display: flex !important;
flex-direction: column !important;
gap: 0.1rem !important;
min-width: 0 !important;
padding: 0.62rem 0.7rem 0.55rem !important;
border: 1px solid #e6c99a24 !important;
border-radius: 0.8rem !important;
background: #0c100b6b !important;
}
html body .moss-stats-k {
margin: 0 !important;
color: var(--color-subtle) !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
html body .moss-stats-v {
margin: 0.06rem 0 0 !important;
color: var(--color-fg) !important;
font-size: 1.4rem !important;
font-weight: 650 !important;
line-height: 1.05 !important;
font-variant-numeric: tabular-nums !important;
}
html body .moss-stats-h {
margin: 0.06rem 0 0 !important;
color: var(--color-muted) !important;
font-size: 0.64rem !important;
}
html body .moss-stats-split {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.35rem !important;
}
html body .moss-stats-split-row {
display: flex !important;
align-items: center !important;
gap: 0.4rem !important;
padding: 0.42rem 0.55rem !important;
border: 1px solid #e6c99a1a !important;
border-radius: 0.65rem !important;
color: var(--color-muted) !important;
font-size: 0.68rem !important;
}
html body .moss-stats-split-row strong {
margin-left: auto !important;
color: var(--color-fg) !important;
font-variant-numeric: tabular-nums !important;
}
html body .moss-stats-insights,
html body .moss-stats-chapters {
padding: 0.65rem 0.7rem !important;
border: 1px solid #e6c99a1f !important;
border-radius: 0.85rem !important;
background: #12160fb8 !important;
}
html body .moss-stats-note {
margin: 0.35rem 0 0 !important;
color: var(--color-muted) !important;
font-size: 0.74rem !important;
line-height: 1.4 !important;
}
html body .moss-stats-note strong { color: var(--color-fg) !important; }
html body .moss-stats-chapters ul {
display: flex !important;
flex-direction: column !important;
gap: 0.35rem !important;
margin: 0.45rem 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body .moss-stats-chapters li {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.55rem !important;
padding: 0.4rem 0 !important;
border-bottom: 1px solid #e6c99a14 !important;
}
html body .moss-stats-chapters li:last-child { border-bottom: 0 !important; }
html body .moss-stats-ch-end {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 0.08rem !important;
color: var(--color-muted) !important;
font-size: 0.64rem !important;
}
html body .moss-stats-pct {
color: var(--color-gold) !important;
font-weight: 650 !important;
}
html body .moss-stats-empty {
margin: 0.4rem 0 0 !important;
color: var(--color-muted) !important;
font-size: 0.78rem !important;
line-height: 1.4 !important;
text-align: center !important;
}
html body .moss-review-notes {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body .moss-review-note {
padding: 0.7rem 0.75rem 0.65rem !important;
border: 1px solid #e6c99a24 !important;
border-radius: 0.85rem !important;
background: #12160fcf !important;
}
html body .moss-review-note.is-new {
border-color: #e08a5c59 !important;
}
html body .moss-review-note-head {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 0.5rem !important;
}
html body .moss-review-note-who {
display: flex !important;
align-items: center !important;
gap: 0.4rem !important;
margin: 0 !important;
color: var(--color-fg) !important;
font-size: 0.84rem !important;
font-weight: 650 !important;
}
html body .moss-review-note-new {
padding: 0.08rem 0.35rem !important;
border-radius: 999px !important;
background: color-mix(in oklab, var(--color-primary) 20%, transparent) !important;
color: var(--color-primary) !important;
font-size: 0.55rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
html body .moss-review-note-meta {
margin: 0.12rem 0 0 !important;
color: var(--color-muted) !important;
font-size: 0.68rem !important;
}
html body .moss-review-note-scores {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0.28rem !important;
margin: 0.55rem 0 0 !important;
}
html body .moss-review-score {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.08rem !important;
padding: 0.28rem 0.1rem !important;
border: 1px solid #e6c99a1f !important;
border-radius: 0.5rem !important;
background: #0c100b66 !important;
color: var(--color-subtle) !important;
font-size: 0.55rem !important;
font-weight: 650 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
html body .moss-review-score strong {
color: var(--color-fg) !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-variant-numeric: tabular-nums !important;
}
html body .moss-review-note-body {
margin: 0.55rem 0 0 !important;
color: var(--color-fg) !important;
font-size: 0.82rem !important;
line-height: 1.45 !important;
white-space: pre-wrap !important;
}
html body .moss-review-note-empty {
margin: 0.45rem 0 0 !important;
color: var(--color-subtle) !important;
font-size: 0.72rem !important;
font-style: italic !important;
}
html body .moss-review-note-when {
margin: 0.4rem 0 0 !important;
color: var(--color-subtle) !important;
font-size: 0.62rem !important;
}
html body .moss-inbox-panels {
padding-top: 0.15rem !important;
}
html body .moss-review-idents {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.28rem !important;
margin: 0 0 0.6rem !important;
}
html body .moss-review-ident {
display: inline-flex !important;
align-items: center !important;
min-height: 1.7rem !important;
padding: 0.18rem 0.55rem !important;
border: 1px solid #e6c99a29 !important;
border-radius: 999px !important;
background: #0c100b73 !important;
color: var(--color-muted) !important;
font-size: 0.68rem !important;
font-weight: 650 !important;
}
html body .moss-review-ident.is-on {
border-color: #e08a5c59 !important;
background: color-mix(in oklab, var(--color-primary) 16%, transparent) !important;
color: var(--color-fg) !important;
}
/* Closed library cards: light bottom fade */
html body .moss-lib-card-cover::after,
html body .moss-lib-top-slide .moss-lib-card-cover::after {
content: "" !important;
pointer-events: none !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 42% !important;
z-index: 1 !important;
background: linear-gradient(
to top,
color-mix(in oklab, var(--color-bg) 52%, transparent) 0%,
color-mix(in oklab, var(--color-bg) 18%, transparent) 52%,
transparent 100%
) !important;
}
html body .moss-lib-card-cover-copy {
position: absolute !important;
left: 0.6rem !important;
right: 2.4rem !important;
bottom: 0.45rem !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.06rem !important;
pointer-events: none !important;
background: none !important;
}
html body .moss-lib-card-cover-copy .moss-lib-card-author {
margin: 0 !important;
color: var(--color-gold) !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-shadow: 0 1px 6px color-mix(in oklab, var(--color-bg) 55%, transparent) !important;
}
html body .moss-lib-card-cover-copy .moss-lib-card-title {
margin: 0 !important;
color: #f3eee0 !important;
font-family: var(--font-display) !important;
font-size: 0.96rem !important;
font-weight: 650 !important;
line-height: 1.15 !important;
display: block !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
text-shadow: 0 1px 8px color-mix(in oklab, var(--color-bg) 60%, transparent) !important;
}
html body .moss-lib-card-main,
html body .moss-lib-card-body {
flex: 0 0 auto !important;
height: auto !important;
}
html body .moss-lib-card-body {
display: flex !important;
flex-direction: column !important;
gap: 0.28rem !important;
padding: 0.42rem 0.65rem 0.28rem !important;
}
html body .moss-lib-card-blurb {
margin: 0 !important;
-webkit-line-clamp: 2 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
html body .moss-lib-card-meta {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
margin-top: 0 !important;
padding-top: 0 !important;
gap: 0.22rem !important;
}
html body .moss-lib-card-rating.is-empty {
color: var(--color-subtle) !important;
gap: 0.28rem !important;
}
html body .moss-lib-card-rating.is-empty .moss-lib-card-rating-n {
font-size: 0.6rem !important;
font-weight: 650 !important;
}
html body .moss-lib-page {
--moss-lib-card-w: min(16.5rem, 78vw);
--moss-lib-card-h: 16.85rem;
}
html body .moss-lib-page .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-feature .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-rail .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-author .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-author-scroller .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-books .moss-lib-card {
flex: 0 0 var(--moss-lib-card-w) !important;
width: var(--moss-lib-card-w) !important;
max-width: var(--moss-lib-card-w) !important;
min-width: var(--moss-lib-card-w) !important;
height: var(--moss-lib-card-h) !important;
overflow: hidden !important;
}
html body .moss-lib-card,
html body .moss-lib-top-slide .moss-lib-card,
html body .moss-lib-more-soon,
html body .moss-lib-top-slide > .moss-lib-more-soon {
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
flex: 1 1 auto !important;
overflow: hidden !important;
}
html body .moss-lib-card-cover,
html body .moss-lib-top-slide .moss-lib-card-cover {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
html body .moss-lib-card-actions {
position: relative !important;
flex: 0 0 auto !important;
margin-top: auto !important;
z-index: 2 !important;
}
html body .header-action-slot[data-slot="keys"],
html body .header-action-slot[data-slot="invite"] {
display: inline-flex !important;
}
html body .header-actions {
overflow: visible !important;
}
html body .header-action-slot[data-slot="profile"] .header-tool-btn img,
html body .header-action-slot[data-slot="profile"] .header-tool-btn > span:not(.header-tool-badge) {
width: 1.55rem !important;
height: 1.55rem !important;
border-radius: 999px !important;
object-fit: cover !important;
}
html body .header-tool-badge--dot,
html body .header-action-slot[data-slot="profile"] .header-tool-badge,
html body .header-action-slot[data-slot="profile"] .header-tool-badge--dot {
position: absolute !important;
top: 0.26rem !important;
right: 0.24rem !important;
width: 0.4rem !important;
height: 0.4rem !important;
min-width: 0.4rem !important;
min-height: 0.4rem !important;
max-width: 0.4rem !important;
max-height: 0.4rem !important;
padding: 0 !important;
border-radius: 999px !important;
background: var(--color-primary) !important;
box-shadow: 0 0 0 1.5px var(--color-surface) !important;
}
html body .moss-keys-sheet .moss-keys-tabs,
html body .moss-sheet .moss-keys-tabs,
html body [data-moss-caret="keys"] .moss-keys-tabs {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.22rem !important;
margin: 0.5rem 0.85rem 0 !important;
padding: 0.22rem !important;
border-radius: 0.85rem !important;
border: 1px solid color-mix(in oklab, var(--color-gold) 18%, transparent) !important;
background: color-mix(in oklab, var(--color-bg) 40%, transparent) !important;
min-height: 2.45rem !important;
visibility: visible !important;
opacity: 1 !important;
}
html body .moss-keys-sheet .moss-keys-tab,
html body .moss-sheet .moss-keys-tab {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.3rem !important;
min-height: 2.05rem !important;
visibility: visible !important;
}
html body .book-switcher .series-layout.moss-desk-3,
html body .book-switcher.is-studio .series-layout.moss-desk-3 {
display: grid !important;
grid-template-columns: 15.25rem minmax(24rem, 1.35fr) minmax(16.5rem, 0.8fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
column-gap: 0.75rem !important;
align-items: stretch !important;
}
html body .book-card-cover-wrap {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
}
/* Banners are in-flow — spacer is only a small gap under Continue / trial */
html body .moss-banner-stack-spacer {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
@media (max-width: 979px) {
html body .book-switcher .series-layout,
html body .book-switcher:not(.is-empty-layout) .series-layout,
html body .book-switcher.is-empty-layout .series-layout {
display: grid !important;
grid-template-columns: var(--moss-nav-col, 7.15rem) minmax(0, 1fr) !important;
grid-template-rows: auto !important;
column-gap: 0.5rem !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-left: 0 !important;
margin-top: 0 !important;
box-sizing: border-box !important;
}
html body .book-switcher .series-top-row,
html body .book-switcher:not(.is-empty-layout) .series-top-row {
display: contents !important;
}
html body .book-switcher .series-nav,
html body .book-switcher .series-nav.is-phone-fixed,
html body .book-switcher:not(.is-empty-layout) .series-nav,
html body .book-switcher:not(.is-empty-layout) .series-nav.is-phone-fixed {
grid-column: 1 !important;
grid-row: 1 !important;
position: sticky !important;
top: var(--series-nav-stick-top, 0px) !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: var(--moss-nav-col, 7.15rem) !important;
max-width: var(--moss-nav-col, 7.15rem) !important;
min-width: 0 !important;
align-self: start !important;
height: var(
--series-nav-stick-h,
calc(
100svh - var(--moss-header-h, 3.7rem) -
var(--moss-player-h, 17rem) - 0.45rem
)
) !important;
min-height: 10rem !important;
max-height: var(
--series-nav-stick-h,
calc(
100svh - var(--moss-header-h, 3.7rem) -
var(--moss-player-h, 17rem) - 0.45rem
)
) !important;
z-index: 2 !important;
overflow: hidden !important;
}
html body .book-switcher .series-right,
html body .book-switcher .series-main,
html body .book-switcher .series-main-stack {
margin-top: 0 !important;
padding-top: 0 !important;
min-width: 0 !important;
}
html body .book-switcher .series-right {
grid-column: 2 !important;
grid-row: 1 !important;
position: relative !important;
z-index: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
html body .book-switcher .series-scroll,
html body .book-switcher:not(.is-empty-layout) .series-scroll,
html body .book-switcher:not(.is-empty-layout) .series-scroll.is-phone-fixed,
html body .book-switcher.is-studio:not(.is-empty-layout) .series-scroll,
html body .book-switcher.is-empty-layout .series-scroll,
html body .book-switcher.is-empty-layout .series-scroll.is-phone-fixed {
grid-column: 2 !important;
grid-row: 1 !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
max-width: none !important;
height: auto !important;
min-width: 0 !important;
min-height: 16rem !important;
max-height: calc(
100dvh - var(--moss-header-h, 3.7rem) - var(--moss-banner-h, 0px) -
var(--moss-player-h, 17rem) - 1rem
) !important;
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
z-index: 7 !important;
padding: 0 0 0.75rem !important;
box-sizing: border-box !important;
}
html body .book-switcher .series-scroll .chapters-scroll-spacer,
html body .book-switcher.is-studio .chapters-scroll-spacer {
display: block !important;
height: 0.65rem !important;
min-height: 0.65rem !important;
max-height: 0.65rem !important;
flex: 0 0 auto !important;
pointer-events: none !important;
}
html body .book-switcher .series-scroll .series-right {
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
width: 100% !important;
min-width: 0 !important;
}
html body .book-switcher .series-scroll .book-card,
html body .book-switcher .series-scroll .moss-author-card,
html body .book-switcher .series-scroll .author-card-anchor,
html body .book-switcher .series-scroll .chapter-card,
html body .book-switcher .series-scroll .series-main,
html body .book-switcher .series-scroll .series-main-stack {
flex: 0 0 auto !important;
height: auto !important;
max-width: 100% !important;
}
html body .book-switcher .series-scroll .book-card-cover-wrap,
html body .book-switcher .series-scroll .book-card-cover {
aspect-ratio: 16 / 9 !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
flex: 0 0 auto !important;
}
html body .book-switcher.is-empty-layout .series-right,
html body .book-switcher.is-empty-layout .series-main,
html body .book-switcher.is-empty-layout .moss-empty-note-col {
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body .book-switcher.is-empty-layout .moss-empty-note-card {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0.4rem !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0.85rem 0.9rem !important;
}
html body .book-switcher.is-empty-layout .moss-empty-note-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.4rem !important;
margin-top: 0.2rem !important;
}
html body .book-switcher.is-empty-layout .moss-empty-note-btn {
height: 2rem !important;
border-radius: 999px !important;
padding: 0 0.75rem !important;
font-size: 0.72rem !important;
}
html body .book-switcher.is-empty-layout .moss-ident-slim {
flex: 0 0 auto !important;
margin: 0 !important;
}
}
@media (min-width: 980px) {
html body .book-switcher .series-scroll {
position: static !important;
display: flex !important;
flex-direction: row !important;
overflow: visible !important;
inset: auto !important;
height: auto !important;
min-height: 0 !important;
}
}
/* Publishing as — pencil pinned to the card's upper-right corner */
html body .moss-ident-slim {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
height: auto !important;
margin: 0 !important;
}
html body .moss-ident-slim .moss-ident-head {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 1.94rem !important;
padding: 0.08rem 2.45rem 0.16rem 0.08rem !important;
}
@media (min-width: 980px) {
html body .book-switcher,
html body .book-switcher.is-studio,
html body .book-switcher.is-desktop-pinned {
--moss-desk-nav: 15.25rem;
}
html body .book-switcher .series-main,
html body .book-switcher.is-studio .series-main,
html body .book-switcher .book-switcher-chapters,
html body .book-switcher.is-studio .book-switcher-chapters,
html body .book-switcher .series-nav,
html body .book-switcher.is-studio .series-nav,
html body .book-switcher .series-nav-list,
html body .book-switcher.is-studio .series-nav-list,
html body .book-switcher .series-nav-list-sortable {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher .series-main::-webkit-scrollbar,
html body .book-switcher .book-switcher-chapters::-webkit-scrollbar,
html body .book-switcher .series-nav::-webkit-scrollbar,
html body .book-switcher .series-nav-list::-webkit-scrollbar,
html body .book-switcher .series-nav-list-sortable::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
html body .book-switcher .series-main-stack > .book-card,
html body .book-switcher.is-studio .series-main-stack > .book-card {
order: 0 !important;
height: auto !important;
max-height: none !important;
max-width: 100% !important;
}
html body .book-switcher .series-main-stack > .author-card-anchor,
html body .book-switcher.is-studio .series-main-stack > .author-card-anchor {
order: 1 !important;
height: auto !important;
max-height: none !important;
max-width: 100% !important;
}
html body .book-switcher .book-card-body,
html body .book-switcher .book-card-below-cover,
html body .book-switcher .book-card-desc,
html body .book-switcher.is-studio .book-card-body,
html body .book-switcher.is-studio .book-card-below-cover,
html body .book-switcher.is-studio .book-card-desc {
display: block !important;
max-height: none !important;
overflow: visible !important;
height: auto !important;
}
/* 16:9 cover on shelf + studio middle */
html body .book-switcher .book-card,
html body .book-switcher.is-studio .book-card {
height: auto !important;
max-height: none !important;
max-width: 100% !important;
}
html body .book-switcher .book-card-cover-wrap,
html body .book-switcher .book-card-cover,
html body .book-switcher .series-main-stack .book-card-cover-wrap,
html body .book-switcher .series-main-stack .book-card-cover,
html body .book-switcher.is-studio .book-card-cover-wrap,
html body .book-switcher.is-studio .book-card-cover {
aspect-ratio: 16 / 9 !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
flex: 0 0 auto !important;
flex-basis: auto !important;
position: relative !important;
}
html body .book-switcher .book-card-art,
html body .book-switcher.is-studio .book-card-art {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
html body .book-switcher .moss-author-card,
html body .book-switcher .moss-author-card.is-desk-full,
html body .book-switcher .moss-author-card.is-desktop-open,
html body .book-switcher.is-studio .moss-author-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding: 0.7rem 0.8rem 0.75rem !important;
gap: 0.55rem !important;
}
html body .book-switcher .moss-author-card-lead {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.55rem !important;
}
html body .book-switcher .moss-author-card-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 0.75rem !important;
width: 100% !important;
}
html body .book-switcher .moss-author-card-media {
flex: 0 0 4.6rem !important;
width: 4.6rem !important;
height: 4.6rem !important;
border-radius: 0.95rem !important;
}
html body .book-switcher .moss-author-card-body {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0.12rem !important;
}
html body .book-switcher .moss-author-card-kicker,
html body .book-switcher .moss-author-card-name {
text-align: left !important;
}
html body .book-switcher .moss-author-card-more {
display: block !important;
width: 100% !important;
padding-top: 0.15rem !important;
border-top: 1px solid color-mix(in oklab, var(--color-gold) 14%, transparent) !important;
}
html body .book-switcher .moss-author-card-bio-full,
html body .book-switcher .moss-author-card-bio {
display: block !important;
white-space: pre-wrap !important;
margin: 0.15rem 0 0 !important;
}
html body .book-switcher .series-main,
html body .book-switcher.is-studio .series-main {
display: block !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
clip-path: inset(0 0 0 0) !important;
}
html body .book-switcher .series-main::-webkit-scrollbar {
width: 0 !important;
display: none !important;
}
html body .book-switcher .moss-ident-slim {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
height: auto !important;
margin: 0 !important;
}
html body .book-switcher .series-main-stack {
display: flex !important;
flex-direction: column !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
gap: 0.5rem !important;
}
html body .book-switcher .series-main-stack > .book-card,
html body .book-switcher .series-main-stack > .book-card.is-desk-short,
html body .book-switcher .series-main-stack > .book-card.is-desk-open {
flex: 0 0 auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
html body .book-switcher .book-card-below-cover,
html body .book-switcher .book-card-count,
html body .book-switcher .book-card-body {
display: block !important;
flex: 0 0 auto !important;
visibility: visible !important;
opacity: 1 !important;
max-height: none !important;
}
html body .book-switcher .book-card.is-desk-short .book-card-desc,
html body .book-switcher .book-card.is-desk-short .book-card-desc-muted {
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
white-space: normal !important;
max-height: 5.4rem !important;
}
html body .book-switcher .book-card.is-desk-short .book-card-desc-scroll {
max-height: 5.4rem !important;
overflow: hidden !important;
}
html body .book-switcher .book-card.is-desk-open .book-card-desc,
html body .book-switcher .book-card.is-desk-open .book-card-desc-scroll {
display: block !important;
-webkit-line-clamp: unset !important;
max-height: none !important;
overflow: visible !important;
white-space: pre-wrap !important;
}
html body .book-switcher .series-main-stack > .author-card-anchor {
flex: 0 0 auto !important;
margin-top: 0.5rem !important;
max-height: none !important;
overflow: visible !important;
}
html body .book-switcher .moss-author-card,
html body .book-switcher .moss-author-card.is-desk-full,
html body .book-switcher .moss-author-card.is-desktop-open {
max-height: none !important;
height: auto !important;
overflow: visible !important;
padding: 0.7rem 0.8rem 0.85rem !important;
gap: 0.45rem !important;
}
html body .book-switcher .moss-author-card-more {
display: block !important;
}
html body .book-switcher .moss-author-card-bio-full,
html body .book-switcher .moss-author-card-bio {
display: block !important;
white-space: pre-wrap !important;
-webkit-line-clamp: unset !important;
max-height: none !important;
overflow: visible !important;
}
/* Studio = same 3 columns as shelf; Publishing as sits on the book card */
html body .book-switcher.is-studio .series-layout,
html body .book-switcher.is-studio.is-desktop-pinned .series-layout,
html body .book-switcher.is-studio .series-layout.moss-desk-3 {
display: grid !important;
flex-direction: unset !important;
grid-template-columns: var(--moss-desk-nav, 15.25rem) minmax(0, 1fr) var(--moss-desk-chapters, 18.5rem) !important;
grid-template-rows: minmax(0, 1fr) !important;
column-gap: 0.75rem !important;
align-items: stretch !important;
min-height: 0 !important;
}
html body .book-switcher.is-studio .series-top-row,
html body .book-switcher.is-studio .series-scroll,
html body .book-switcher.is-studio .series-right {
display: flex !important;
flex-direction: row !important;
position: static !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
html body .book-switcher.is-studio .series-nav {
grid-column: 1 !important;
grid-row: 1 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
html body .book-switcher.is-studio .series-nav-list,
html body .book-switcher.is-studio .series-nav-list-sortable {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
}
html body .book-switcher.is-studio .series-main {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
min-width: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher.is-studio .book-switcher-chapters {
grid-column: 3 !important;
grid-row: 1 !important;
min-width: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher.is-studio .series-main::-webkit-scrollbar,
html body .book-switcher.is-studio .book-switcher-chapters::-webkit-scrollbar,
html body .book-switcher.is-studio .series-nav-list::-webkit-scrollbar {
width: 0 !important;
display: none !important;
}
html body .book-switcher.is-studio .series-main-stack {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
height: auto !important;
overflow: visible !important;
}
html body .book-switcher.is-studio .series-main-stack > .moss-ident-slim,
html body .book-switcher.is-studio .moss-ident-slim {
order: -1 !important;
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
@media (min-width: 980px) {
html body .book-switcher .series-top-row,
html body .book-switcher .series-scroll,
html body .book-switcher .series-right,
html body .book-switcher.is-studio .series-top-row,
html body .book-switcher.is-studio .series-scroll,
html body .book-switcher.is-studio .series-right,
html body .book-switcher.is-empty-layout .series-top-row,
html body .book-switcher.is-empty-layout .series-scroll,
html body .book-switcher.is-empty-layout .series-right {
display: flex !important;
flex-direction: row !important;
position: static !important;
inset: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
html body .book-switcher .series-layout,
html body .book-switcher.is-studio .series-layout,
html body .book-switcher.is-desktop-pinned .series-layout,
html body .book-switcher.is-empty-layout .series-layout {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
}
}
/* Flattened-enough DOM: nav + .series-right (main + chapters) */
@media (max-width: 979px) {
html body .book-switcher .series-layout {
display: grid !important;
grid-template-columns: var(--moss-nav-col, 7.15rem) minmax(0, 1fr) !important;
column-gap: 0.55rem !important;
align-items: start !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
html body .book-switcher .series-nav,
html body .book-switcher .series-nav.is-phone-fixed {
grid-column: 1 !important;
grid-row: 1 !important;
position: sticky !important;
top: var(--series-nav-stick-top, 0px) !important;
left: auto !important;
right: auto !important;
z-index: 2 !important;
width: var(--moss-nav-col, 7.15rem) !important;
max-width: var(--moss-nav-col, 7.15rem) !important;
min-width: 0 !important;
overflow: hidden !important;
}
html body .book-switcher .series-right {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: relative !important;
z-index: 1 !important;
}
html body .book-switcher .series-main,
html body .book-switcher .book-switcher-chapters {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
html body .book-switcher .book-switcher-chapters {
padding-bottom: 0 !important;
}
html body .book-switcher .chapters-scroll-spacer {
display: block !important;
height: 8px !important;
min-height: 8px !important;
max-height: 8px !important;
flex: 0 0 auto !important;
}
}
@media (min-width: 980px) {
html body {
--moss-desk-nav: 15.25rem;
--moss-desk-chapters: 18.5rem;
--moss-desk-center: 34rem;
--moss-desk-header: 5.5rem;
--moss-desk-tabs: 4.6rem;
--moss-desk-player: 7.1rem;
}
html body .book-switcher,
html body .book-switcher.is-studio,
html body .book-switcher.is-empty-layout {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-inline: 1.25rem !important;
}
html body .book-switcher .series-layout,
html body .book-switcher.is-studio .series-layout,
html body .book-switcher.is-empty-layout .series-layout {
display: grid !important;
grid-template-columns:
var(--moss-desk-nav) minmax(0, 1fr) var(--moss-desk-chapters) !important;
grid-template-rows: minmax(0, 1fr) !important;
column-gap: 0.75rem !important;
align-items: stretch !important;
width: 100% !important;
min-height: 0 !important;
height: calc(100vh - var(--moss-desk-header) - var(--moss-desk-tabs)) !important;
max-height: calc(100vh - var(--moss-desk-header) - var(--moss-desk-tabs)) !important;
}
html body .book-switcher .series-nav,
html body .book-switcher .series-nav.is-phone-fixed {
grid-column: 1 !important;
grid-row: 1 !important;
position: relative !important;
top: auto !important;
align-self: stretch !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
inset: auto !important;
flex: none !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher .series-nav::-webkit-scrollbar,
html body .book-switcher .series-nav-list::-webkit-scrollbar,
html body .book-switcher .series-nav-list-sortable::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
html body .book-switcher .series-right,
html body .book-switcher.is-studio .series-right,
html body .book-switcher.is-empty-layout .series-right {
display: contents !important;
}
html body .book-switcher .series-main {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
align-self: stretch !important;
min-width: 0 !important;
min-height: 0 !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding-bottom: 0 !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher .series-main::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
html body .book-switcher .series-main-stack {
width: 100% !important;
max-width: var(--moss-desk-center) !important;
margin-inline: auto !important;
padding-bottom: calc(var(--moss-desk-player) + 2.25rem) !important;
}
html body .book-switcher .book-switcher-chapters {
grid-column: 3 !important;
grid-row: 1 !important;
align-self: stretch !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding-bottom: calc(var(--moss-desk-player) + 0.75rem) !important;
position: relative !important;
top: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher .book-switcher-chapters::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
html body .moss-player-dock {
position: fixed !important;
left: 1.25rem !important;
right: 1.25rem !important;
bottom: var(--moss-desk-tabs) !important;
z-index: 210 !important;
display: grid !important;
grid-template-columns:
var(--moss-desk-nav) minmax(0, 1fr) var(--moss-desk-chapters) !important;
column-gap: 0.75rem !important;
pointer-events: none !important;
transform: none !important;
padding: 0 !important;
background: none !important;
}
html body .moss-player-dock .moss-player-bar,
html body .moss-player-bar {
grid-column: 2 !important;
position: relative !important;
width: 100% !important;
max-width: var(--moss-desk-center) !important;
margin-inline: auto !important;
pointer-events: auto !important;
}
html body .moss-player-dock .moss-player-bar::before {
content: "" !important;
position: absolute !important;
left: -6% !important;
right: -6% !important;
bottom: 100% !important;
height: 2.6rem !important;
background: linear-gradient(to top, #0c100b 15%, transparent) !important;
pointer-events: none !important;
z-index: -1 !important;
}
html body .moss-bottom-nav {
display: flex !important;
justify-content: center !important;
visibility: visible !important;
z-index: 220 !important;
}
}
/* ==== COMPUTER ONLY (min-width 980). Phone uses the locked backup above. ==== */
@media (min-width: 980px) {
html body {
--moss-desk-nav: 15.25rem;
--moss-desk-chapters: 18.5rem;
--moss-desk-center: 34rem;
--moss-desk-header: 5.5rem;
--moss-desk-tabs: 4.6rem;
--moss-desk-player: 10rem;
--moss-desk-gap: 0.5rem;
--moss-desk-col-gap: 0.75rem;
--moss-desk-row: calc(
var(--moss-desk-nav) + var(--moss-desk-center) + var(--moss-desk-chapters) +
(2 * var(--moss-desk-col-gap))
);
}
html body .book-switcher,
html body .book-switcher.is-studio,
html body .book-switcher.is-empty-layout {
width: 100% !important;
max-width: var(--moss-desk-row) !important;
margin: 0 auto !important;
padding-inline: 0 !important;
padding-top: 0.25rem !important;
}
html body .book-switcher .series-layout,
html body .book-switcher.is-studio .series-layout,
html body .book-switcher.is-empty-layout .series-layout,
html body .book-switcher.is-desktop-pinned .series-layout {
display: grid !important;
grid-template-columns: var(--moss-desk-nav) minmax(0, 1fr) var(--moss-desk-chapters) !important;
grid-template-rows: minmax(0, 1fr) !important;
column-gap: 0.75rem !important;
align-items: stretch !important;
width: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
height: calc(100vh - var(--moss-desk-header) - var(--moss-desk-tabs) - var(--moss-desk-player) - var(--moss-desk-gap)) !important;
max-height: calc(100vh - var(--moss-desk-header) - var(--moss-desk-tabs) - var(--moss-desk-player) - var(--moss-desk-gap)) !important;
}
html body .book-switcher .series-nav,
html body .book-switcher .series-nav.is-phone-fixed,
html body .book-switcher.is-studio .series-nav,
html body .book-switcher.is-empty-layout .series-nav {
grid-column: 1 !important;
grid-row: 1 !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
inset: auto !important;
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
width: auto !important;
max-width: none !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
flex: none !important;
}
html body .book-switcher .series-nav-list,
html body .book-switcher .series-nav-list-sortable,
html body .book-switcher .moss-empty-book-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher .series-nav-add-note {
flex: 0 0 auto !important;
margin-top: auto !important;
}
html body .book-switcher .series-nav::-webkit-scrollbar,
html body .book-switcher .series-nav-list::-webkit-scrollbar,
html body .book-switcher .series-nav-list-sortable::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
html body .book-switcher .series-right,
html body .book-switcher.is-studio .series-right,
html body .book-switcher.is-empty-layout .series-right,
html body .book-switcher.is-studio .series-scroll,
html body .book-switcher .series-scroll,
html body .book-switcher .series-top-row {
display: contents !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
}
html body .book-switcher .series-main,
html body .book-switcher.is-studio .series-main,
html body .book-switcher:not(.is-empty-layout) .series-main,
html body .book-switcher.is-studio:not(.is-empty-layout) .series-main {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
align-self: stretch !important;
justify-self: stretch !important;
min-width: 0 !important;
min-height: 0 !important;
width: auto !important;
max-width: none !important;
height: 100% !important;
max-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding-bottom: 0 !important;
flex: none !important;
position: relative !important;
inset: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher .series-main::-webkit-scrollbar,
html body .book-switcher.is-studio .series-main::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
html body .book-switcher .series-main-stack,
html body .book-switcher.is-studio .series-main-stack,
html body .book-switcher:not(.is-empty-layout) .series-main-stack {
width: 100% !important;
max-width: var(--moss-desk-center) !important;
margin-inline: auto !important;
flex: 0 0 auto !important;
height: auto !important;
max-height: none !important;
padding-bottom: var(--moss-desk-gap) !important;
overflow: visible !important;
}
html body .book-switcher .book-switcher-chapters,
html body .book-switcher.is-studio .book-switcher-chapters,
html body .book-switcher:not(.is-empty-layout) .book-switcher-chapters,
html body .book-switcher.is-studio:not(.is-empty-layout) .book-switcher-chapters {
grid-column: 3 !important;
grid-row: 1 !important;
align-self: stretch !important;
justify-self: stretch !important;
min-width: 0 !important;
min-height: 0 !important;
width: auto !important;
max-width: none !important;
height: 100% !important;
max-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding-bottom: var(--moss-desk-gap) !important;
position: relative !important;
top: auto !important;
flex: none !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body .book-switcher .book-switcher-chapters::-webkit-scrollbar,
html body .book-switcher.is-studio .book-switcher-chapters::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
html body .book-switcher .chapters-scroll-spacer,
html body .book-switcher.is-studio .chapters-scroll-spacer {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
html body .book-switcher .series-main-stack,
html body .book-switcher.is-studio .series-main-stack,
html body .book-switcher .book-switcher-chapters,
html body .book-switcher.is-studio .book-switcher-chapters {
box-sizing: border-box !important;
padding-bottom: var(--moss-desk-gap) !important;
}
html body .moss-player-dock {
position: fixed !important;
left: 0 !important;
right: 0 !important;
width: min(var(--moss-desk-row), calc(100vw - 2.5rem)) !important;
max-width: var(--moss-desk-row) !important;
margin-inline: auto !important;
bottom: var(--moss-desk-tabs) !important;
z-index: 210 !important;
display: grid !important;
grid-template-columns: var(--moss-desk-nav) minmax(0, 1fr) var(--moss-desk-chapters) !important;
column-gap: var(--moss-desk-col-gap) !important;
pointer-events: none !important;
transform: none !important;
padding: 0 !important;
background: none !important;
}
html body .moss-player-dock .moss-player-bar {
grid-column: 2 !important;
position: relative !important;
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
pointer-events: auto !important;
}
html body .moss-player-dock .moss-player-bar::before {
content: none !important;
display: none !important;
background: none !important;
}
html body .moss-bottom-nav {
display: flex !important;
justify-content: center !important;
visibility: visible !important;
pointer-events: none !important;
height: auto !important;
z-index: 220 !important;
}
html body .moss-bottom-nav-inner {
pointer-events: auto !important;
}
html body .moss-header-tabs,
html body .moss-header-tabs-host {
display: none !important;
}
html body:has(.moss-tab-panel--shelf.is-on) .moss-app-main:has(.book-switcher) {
overflow: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html body:has(.moss-tab-panel--shelf.is-on) .moss-app-main:has(.book-switcher)::-webkit-scrollbar {
width: 0 !important;
display: none !important;
}
html body:has(.moss-tab-panel--lib.is-on) .moss-app-main,
html body:has(.moss-tab-panel--lib.is-on) .moss-app-main:has(.book-switcher) {
overflow-x: hidden !important;
overflow-y: auto !important;
height: auto !important;
max-height: none !important;
}
html body .book-switcher.is-empty-layout,
html body .book-switcher.is-empty-layout .series-stage {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
height: calc(100vh - var(--moss-desk-header) - var(--moss-desk-tabs) - var(--moss-desk-player) - var(--moss-desk-gap)) !important;
max-height: calc(100vh - var(--moss-desk-header) - var(--moss-desk-tabs) - var(--moss-desk-player) - var(--moss-desk-gap)) !important;
}
html body .book-switcher.is-empty-layout .series-layout {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
}
html body .book-switcher.is-empty-layout .series-main,
html body .book-switcher.is-empty-layout .moss-empty-note-col {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
overflow: hidden !important;
}
html body .book-switcher.is-empty-layout .moss-empty-note-card {
width: 100% !important;
max-width: var(--moss-desk-center) !important;
margin-inline: auto !important;
flex: 1 1 auto !important;
min-height: 0 !important;
align-self: center !important;
}
}
/* Library cards: 16:9 cover, info, then buttons. Empty cards match full cards. */
html body .moss-lib-page {
--moss-lib-card-w: min(16.5rem, 78vw);
--moss-lib-card-h: auto;
}
html body .moss-lib-top-scroller,
html body .moss-lib-author-scroller,
html body .moss-lib-rail-wrap .moss-lib-top-scroller {
display: flex !important;
align-items: stretch !important;
}
html body .moss-lib-page .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-feature .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-rail .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-author .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-author-scroller .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-books .moss-lib-card {
flex: 0 0 var(--moss-lib-card-w) !important;
width: var(--moss-lib-card-w) !important;
max-width: var(--moss-lib-card-w) !important;
min-width: var(--moss-lib-card-w) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
}
html body .moss-lib-card,
html body .moss-lib-top-slide .moss-lib-card {
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
width: 100% !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
html body .moss-lib-more-soon,
html body .moss-lib-top-slide > .moss-lib-more-soon {
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
width: 100% !important;
flex: 1 1 auto !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
}
html body .moss-lib-card-cover-wrap,
html body .moss-lib-card-main {
display: flex !important;
flex-direction: column !important;
flex: 0 0 auto !important;
min-height: 0 !important;
height: auto !important;
width: 100% !important;
aspect-ratio: auto !important;
}
html body .moss-lib-card-cover,
html body .moss-lib-top-slide .moss-lib-card-cover,
html body .moss-lib-card-cover.has-image,
html body .moss-lib-card-cover-wrap .moss-lib-card-cover {
aspect-ratio: 16 / 9 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
flex: 0 0 auto !important;
}
html body .moss-lib-card-body {
flex: 0 0 auto !important;
height: auto !important;
overflow: visible !important;
padding-bottom: 0.15rem !important;
}
html body .moss-lib-card-actions {
position: relative !important;
flex: 0 0 auto !important;
margin-top: 0.2rem !important;
z-index: 2 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.4rem !important;
padding: 0.4rem 0.55rem 0.5rem !important;
border-top: 1px solid color-mix(in oklab, var(--color-border) 50%, transparent) !important;
}
html body .moss-lib-card-actions .moss-lib-add-btn {
width: 100% !important;
justify-content: center !important;
min-width: 0 !important;
}
html body .moss-lib-card-cover-tools,
html body .moss-lib-detail-shop.moss-lib-card-cover-tools {
position: absolute !important;
top: 0.42rem !important;
right: 0.42rem !important;
z-index: 6 !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 0 !important;
padding: 0.12rem !important;
border-radius: 999px !important;
border: 1px solid color-mix(in oklab, white 20%, transparent) !important;
background: color-mix(in oklab, #0c100b 72%, transparent) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 12px color-mix(in oklab, #0c100b 40%, transparent) !important;
pointer-events: auto !important;
}
html body .moss-lib-card-cover-tools .moss-lib-buy-root,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-float {
position: relative !important;
top: auto !important;
right: auto !important;
inset: auto !important;
z-index: 6 !important;
}
html body .moss-lib-card-cover-tool,
html body .moss-lib-card-cover-tools .moss-lib-share-btn,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-btn {
display: grid !important;
place-items: center !important;
width: 1.7rem !important;
height: 1.7rem !important;
min-width: 1.7rem !important;
min-height: 1.7rem !important;
padding: 0 !important;
border-radius: 999px !important;
border: 0 !important;
background: transparent !important;
color: #f3eee0 !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
}
html body .moss-lib-card-cover-tools .moss-lib-share-btn:hover,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-btn:hover {
background: color-mix(in oklab, white 12%, transparent) !important;
}
/* Closed cards: same left/bottom inset as opened cover copy */
html body .moss-lib-card-cover-copy {
left: 0.75rem !important;
right: 0.75rem !important;
bottom: 0.65rem !important;
align-items: flex-start !important;
text-align: left !important;
padding: 0 !important;
margin: 0 !important;
}
html body .moss-lib-card-cover-copy .moss-lib-card-author,
html body .moss-lib-card-cover-copy .moss-lib-card-title {
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
html body .moss-lib-card-cover-copy .moss-lib-card-author {
font-size: 0.68rem !important;
letter-spacing: 0.06em !important;
}
html body .moss-lib-card-cover-copy .moss-lib-card-title {
margin: 0.12rem 0 0 !important;
}
html body .moss-lib-rail-arrow {
display: none !important;
}
@media (min-width: 980px) {
html body .app-container,
html body .moss-app-header-inner {
width: 100% !important;
max-width: var(--moss-desk-row) !important;
margin-inline: auto !important;
padding-inline: 0 !important;
box-sizing: border-box !important;
}
html body .moss-app-header,
html body .moss-app-main {
padding-inline: 2.55rem !important;
box-sizing: border-box !important;
}
html body .moss-lib-page,
html body .moss-tab-panel--lib.is-on .moss-lib-page {
max-width: none !important;
width: 100% !important;
margin-inline: 0 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
html body .moss-tab-panel--lib.is-on {
width: 100% !important;
max-width: none !important;
height: auto !important;
overflow: visible !important;
}
html body:has(.moss-tab-panel--lib.is-on) .moss-app-main {
overflow-x: visible !important;
}
html body .moss-lib-top-scroller,
html body .moss-lib-author-scroller {
cursor: grab;
}
html body .moss-lib-top-scroller.is-dragging,
html body .moss-lib-author-scroller.is-dragging {
cursor: grabbing;
user-select: none !important;
scroll-snap-type: none !important;
scroll-behavior: auto !important;
}
html body .moss-lib-rail-wrap {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: center !important;
column-gap: 0 !important;
overflow: visible !important;
}
html body .moss-lib-rail-wrap.is-scrollable {
width: calc(100% + 5.1rem) !important;
margin-inline: -2.55rem !important;
grid-template-columns: 2.15rem minmax(0, 1fr) 2.15rem !important;
column-gap: 0.2rem !important;
}
html body .moss-lib-rail-wrap .moss-lib-top-scroller {
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
margin-inline: 0 !important;
gap: 0.65rem !important;
scroll-snap-type: x proximity !important;
scroll-behavior: smooth !important;
scroll-padding-inline: 0 !important;
}
html body .moss-lib-rail-wrap.is-scrollable .moss-lib-top-scroller {
grid-column: 2 !important;
}
html body .moss-lib-rail-wrap .moss-lib-top-slide,
html body .moss-lib-author-scroller .moss-lib-top-slide {
flex: 0 0 calc((100% - 1.95rem) / 4) !important;
width: calc((100% - 1.95rem) / 4) !important;
max-width: calc((100% - 1.95rem) / 4) !important;
min-width: 0 !important;
scroll-snap-align: start !important;
scroll-snap-stop: normal !important;
}
html body .moss-lib-rail-arrow {
display: none !important;
}
html body .moss-lib-rail-wrap.is-scrollable .moss-lib-rail-arrow {
display: grid !important;
place-items: center !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
inset: auto !important;
transform: none !important;
z-index: 6 !important;
width: 2.05rem !important;
height: 2.05rem !important;
min-width: 2.05rem !important;
min-height: 2.05rem !important;
border-radius: 999px !important;
border: 1px solid color-mix(in oklab, var(--color-gold) 40%, transparent) !important;
background: color-mix(in oklab, #1a1f16 94%, transparent) !important;
color: #f3eee0 !important;
cursor: pointer !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
box-shadow: 0 4px 14px color-mix(in oklab, #0c100b 45%, transparent) !important;
}
html body .moss-lib-rail-arrow.is-prev {
grid-column: 1 !important;
justify-self: center !important;
}
html body .moss-lib-rail-arrow.is-next {
grid-column: 3 !important;
justify-self: center !important;
}
html body .moss-lib-rail-arrow svg {
width: 1.05rem !important;
height: 1.05rem !important;
}
html body .moss-lib-rail-arrow.is-disabled,
html body .moss-lib-rail-arrow:disabled {
opacity: 0.32 !important;
cursor: default !important;
pointer-events: none !important;
}
}
html body .moss-lib-detail-cover-copy {
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 0.65rem !important;
left: 0.75rem !important;
right: 0.75rem !important;
bottom: 0.65rem !important;
}
html body .moss-lib-detail-cover-text {
min-width: 0 !important;
flex: 1 1 auto !important;
text-align: left !important;
}
html body .moss-lib-detail-author-photo {
flex: 0 0 auto !important;
order: 0 !important;
}
html body .moss-lib-card-cover-tools .moss-lib-share-btn,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-btn,
html body .moss-lib-detail-shop .moss-lib-share-btn,
html body .moss-lib-detail-shop .moss-lib-card-buy-btn {
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
transform: none !important;
}
html body .moss-lib-card-cover-tools .moss-lib-share-btn:hover,
html body .moss-lib-card-cover-tools .moss-lib-share-btn:focus,
html body .moss-lib-card-cover-tools .moss-lib-share-btn:focus-visible,
html body .moss-lib-card-cover-tools .moss-lib-share-btn:active,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-btn:hover,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-btn:focus,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-btn:focus-visible,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-btn:active,
html body .moss-lib-detail-shop .moss-lib-share-btn:hover,
html body .moss-lib-detail-shop .moss-lib-share-btn:focus,
html body .moss-lib-detail-shop .moss-lib-share-btn:active,
html body .moss-lib-detail-shop .moss-lib-card-buy-btn:hover,
html body .moss-lib-detail-shop .moss-lib-card-buy-btn:focus,
html body .moss-lib-detail-shop .moss-lib-card-buy-btn:active,
html body .moss-lib-card-buy-btn:hover,
html body .moss-lib-card-buy-btn:focus,
html body .moss-lib-card-buy-btn:active {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
color: #f3eee0 !important;
filter: none !important;
}
@media (hover: hover) and (pointer: fine) {
html body .moss-lib-card-cover-tools .moss-lib-share-btn:hover,
html body .moss-lib-card-cover-tools .moss-lib-card-buy-btn:hover,
html body .moss-lib-detail-shop .moss-lib-share-btn:hover,
html body .moss-lib-detail-shop .moss-lib-card-buy-btn:hover {
background: color-mix(in oklab, white 12%, transparent) !important;
}
}
html body .chapters-more-anchor,
html body .chapters-more-cue {
display: none !important;
}
@media (min-width: 980px) {
html body .chapters-panel.has-more-below .chapters-more-anchor {
display: block !important;
position: sticky !important;
top: 0 !important;
height: 0 !important;
z-index: 9 !important;
pointer-events: none !important;
}
html body .chapters-panel.has-more-below .chapters-more-cue {
display: flex !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
transform: none !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.35rem !important;
height: var(--chapters-view-h, 70vh) !important;
padding: 0 0.2rem 0.4rem !important;
pointer-events: none !important;
z-index: 9 !important;
}
html body .chapters-more-cue-fade {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
height: 4.6rem !important;
background: linear-gradient(
to bottom,
transparent 0%,
color-mix(in oklab, #0c100b 55%, transparent) 42%,
#0c100b 88%
) !important;
pointer-events: none !important;
}
html body .chapters-more-cue-btn {
position: relative !important;
z-index: 1 !important;
pointer-events: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.28rem !important;
margin: 0 !important;
padding: 0.28rem 0.7rem !important;
border-radius: 999px !important;
border: 1px solid color-mix(in oklab, var(--color-gold) 42%, transparent) !important;
background: color-mix(in oklab, #1a1f16 94%, transparent) !important;
color: #f3eee0 !important;
font-size: 0.68rem !important;
font-weight: 650 !important;
letter-spacing: 0.04em !important;
cursor: pointer !important;
box-shadow: 0 6px 16px color-mix(in oklab, #0c100b 50%, transparent) !important;
}
html body .chapters-more-cue-btn svg {
width: 0.9rem !important;
height: 0.9rem !important;
}
}
@media (max-width: 979px) {
html body .moss-sheet.moss-lib-detail-sheet,
html body [data-radix-dialog-content].moss-lib-detail-sheet,
html.moss-lib-detail-open .moss-sheet.moss-lib-detail-sheet,
html.moss-lib-detail-open [data-radix-dialog-content].moss-lib-detail-sheet {
position: fixed !important;
inset: auto !important;
top: calc(
(
var(--moss-header-bottom, 4.2rem) + 100dvh -
var(--moss-player-clearance, 4.85rem)
) / 2
) !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: min(100vw - 1.6rem, 21rem) !important;
max-width: min(100vw - 1.6rem, 21rem) !important;
height: fit-content !important;
max-height: calc(
100dvh - var(--moss-header-bottom, 4.2rem) -
var(--moss-player-clearance, 4.85rem) - 0.5rem
) !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
translate: none !important;
animation: none !important;
transition: none !important;
}
html body .moss-app-header {
padding-inline: 0 !important;
}
html body .moss-app-header-inner,
html body .moss-app-header .app-container {
max-width: none !important;
width: 100% !important;
margin-inline: 0 !important;
padding-inline: max(0.5rem, env(safe-area-inset-left, 0px))
max(0.5rem, env(safe-area-inset-right, 0px)) !important;
}
html body .moss-app-main {
padding-inline: max(0.875rem, env(safe-area-inset-left, 0px))
max(0.875rem, env(safe-area-inset-right, 0px)) !important;
}
html body .book-switcher .series-top-row,
html body .book-switcher .series-scroll,
html body .book-switcher .series-right {
display: flex !important;
}
html body .book-switcher .series-layout,
html body .book-switcher.is-empty-layout .series-layout {
display: grid !important;
grid-template-columns: var(--moss-nav-col, 7.15rem) minmax(0, 1fr) !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
}
html body .moss-player-dock {
display: block !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: none !important;
margin-inline: 0 !important;
grid-template-columns: none !important;
}
html body .moss-lib-rail-arrow,
html body .moss-lib-rail-wrap.is-scrollable .moss-lib-rail-arrow {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
min-width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
html body .moss-lib-rail-wrap.is-scrollable {
width: 100% !important;
margin-inline: 0 !important;
display: block !important;
grid-template-columns: none !important;
}
}
@media (max-width: 979px) {
html body [data-slot="dialog-content"].moss-reader,
html body [data-radix-dialog-content].moss-reader,
html body .moss-reader {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: 0 !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
height: 100dvh !important;
max-height: 100dvh !important;
border-radius: 0 !important;
}
}
@media (min-width: 980px) {
html body .book-switcher .series-nav,
html body .book-switcher.is-studio .series-nav,
html body .book-switcher .series-nav.is-phone-fixed {
display: flex !important;
flex-direction: column !important;
visibility: visible !important;
opacity: 1 !important;
width: 15.25rem !important;
min-width: 15.25rem !important;
max-width: 15.25rem !important;
height: 100% !important;
min-height: 12rem !important;
overflow: hidden !important;
}
html body .book-switcher .series-nav-list,
html body .book-switcher .series-nav-list-sortable {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 8rem !important;
overflow-x: hidden !important;
overflow-y: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
html body .book-switcher .series-pick {
display: block !important;
visibility: visible !important;
height: auto !important;
min-height: 2.8rem !important;
}
html body [data-radix-dialog-content].moss-reader,
html body .moss-reader {
position: fixed !important;
inset: auto !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
width: min(40rem, calc(100vw - 4rem)) !important;
max-width: min(40rem, calc(100vw - 4rem)) !important;
height: min(70dvh, calc(100dvh - 6rem)) !important;
max-height: min(70dvh, calc(100dvh - 6rem)) !important;
padding: 0 !important;
border-radius: 1.15rem !important;
border: 1px solid #e6c99a38 !important;
box-shadow: 0 28px 80px #000000a3 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background: var(--reader-bg, #0c100b) !important;
z-index: 540 !important;
}
html body .moss-reader-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
}
html body .moss-reader-tap-hint {
display: none !important;
}
}
/* Studio cards = same widths + alignment as shelf */
@media (max-width: 979px) {
html body .book-switcher.is-studio,
html body .book-switcher[data-view="studio"] {
--moss-nav-col: var(--moss-nav-col, 7.15rem);
}
html body .book-switcher.is-studio .series-layout,
html body .book-switcher[data-view="studio"] .series-layout,
html body .book-switcher.is-studio.is-empty-layout .series-layout {
display: grid !important;
grid-template-columns: var(--moss-nav-col, 7.15rem) minmax(0, 1fr) !important;
column-gap: 0.5rem !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-inline: 0 !important;
}
html body .book-switcher.is-studio .series-nav,
html body .book-switcher.is-studio .series-nav.is-phone-fixed {
width: var(--moss-nav-col, 7.15rem) !important;
max-width: var(--moss-nav-col, 7.15rem) !important;
min-width: 0 !important;
}
html body .book-switcher.is-studio .series-main,
html body .book-switcher.is-studio .series-main-stack,
html body .book-switcher.is-studio .series-right,
html body .book-switcher.is-studio .book-card,
html body .book-switcher.is-studio .moss-author-card,
html body .book-switcher.is-studio .moss-ident-slim,
html body .book-switcher.is-studio .author-card-anchor,
html body .book-switcher.is-studio .book-switcher-chapters,
html body .book-switcher.is-studio .moss-empty-note-card {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
@media (min-width: 980px) {
html body .book-switcher.is-studio,
html body .book-switcher[data-view="studio"],
html body .book-switcher[data-view="shelf"],
html body .book-switcher {
--moss-desk-nav: 15.25rem;
--moss-desk-chapters: 18.5rem;
--moss-desk-center: 34rem;
--moss-desk-col-gap: 0.75rem;
}
html body .book-switcher.is-studio .series-layout,
html body .book-switcher.is-studio.is-desktop-pinned .series-layout,
html body .book-switcher.is-studio .series-layout.moss-desk-3,
html body .book-switcher[data-view="studio"] .series-layout,
html body .book-switcher[data-view="shelf"] .series-layout,
html body .book-switcher .series-layout {
display: grid !important;
flex-direction: unset !important;
grid-template-columns: 15.25rem minmax(0, 1fr) 18.5rem !important;
grid-template-rows: minmax(0, 1fr) !important;
column-gap: 0.75rem !important;
align-items: stretch !important;
width: 100% !important;
}
html body .book-switcher.is-studio .series-top-row,
html body .book-switcher.is-studio .series-scroll,
html body .book-switcher.is-studio .series-right,
html body .book-switcher .series-top-row,
html body .book-switcher .series-scroll,
html body .book-switcher .series-right {
display: contents !important;
}
html body .book-switcher.is-studio .series-nav,
html body .book-switcher .series-nav {
grid-column: 1 !important;
width: 15.25rem !important;
min-width: 15.25rem !important;
max-width: 15.25rem !important;
}
html body .book-switcher.is-studio .series-main,
html body .book-switcher .series-main {
grid-column: 2 !important;
width: auto !important;
max-width: none !important;
}
html body .book-switcher.is-studio .book-switcher-chapters,
html body .book-switcher .book-switcher-chapters {
grid-column: 3 !important;
width: auto !important;
max-width: none !important;
}
html body .book-switcher.is-studio .series-main-stack,
html body .book-switcher .series-main-stack {
width: 100% !important;
max-width: 34rem !important;
margin-inline: auto !important;
}
html body .book-switcher.is-studio .series-main-stack > *,
html body .book-switcher .series-main-stack > *,
html body .book-switcher.is-studio .book-card,
html body .book-switcher .book-card,
html body .book-switcher.is-studio .moss-author-card,
html body .book-switcher .moss-author-card,
html body .book-switcher.is-studio .moss-ident-slim,
html body .book-switcher .moss-ident-slim {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* Library pills: stars on their own row, tags wrap evenly below */
html body .moss-lib-chip {
white-space: nowrap !important;
max-width: 42% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body .moss-lib-card-meta,
html body .moss-lib-top-slide .moss-lib-card-meta,
html body .moss-lib-detail-meta {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.28rem !important;
width: 100% !important;
}
html body .moss-lib-card-tags,
html body .moss-lib-top-slide .moss-lib-card-tags,
html body .moss-lib-detail-tags {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.22rem !important;
width: 100% !important;
max-height: 2.55rem !important;
overflow: hidden !important;
}
html body .moss-lib-card-tags span,
html body .moss-lib-top-slide .moss-lib-card-tags span,
html body .moss-lib-detail-tags span {
display: inline-flex !important;
align-items: center !important;
height: 1.15rem !important;
padding: 0 0.42rem !important;
border-radius: 999px !important;
font-size: 0.56rem !important;
font-weight: 650 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
@media (min-width: 980px) {
html body .moss-lib-page {
--moss-lib-card-h: 17.5rem;
}
html body .moss-lib-page .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-feature .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-rail .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-author .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-author-scroller .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-books .moss-lib-card,
html body .moss-lib-rail-wrap .moss-lib-top-slide,
html body .moss-lib-author-scroller .moss-lib-top-slide {
height: var(--moss-lib-card-h) !important;
min-height: var(--moss-lib-card-h) !important;
max-height: var(--moss-lib-card-h) !important;
}
html body .moss-lib-card,
html body .moss-lib-top-slide .moss-lib-card,
html body .moss-lib-more-soon,
html body .moss-lib-top-slide > .moss-lib-more-soon {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
html body .moss-lib-card-cover-wrap,
html body .moss-lib-card-main {
flex: 1 1 auto !important;
min-height: 0 !important;
}
html body .moss-lib-card-body {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
html body .moss-lib-card-tags,
html body .moss-lib-top-slide .moss-lib-card-tags {
max-height: 2.5rem !important;
overflow: hidden !important;
}
html body .moss-lib-card-actions {
margin-top: auto !important;
flex: 0 0 auto !important;
}
}
/* Author catalog coming-soon slot matches filled book cards */
html body .moss-lib-page .moss-lib-author-scroller .moss-lib-top-slide,
html body .moss-lib-page .moss-lib-rail .moss-lib-top-slide {
height: var(--moss-lib-card-h, 17.25rem) !important;
min-height: var(--moss-lib-card-h, 17.25rem) !important;
max-height: var(--moss-lib-card-h, 17.25rem) !important;
overflow: hidden !important;
}
html body .moss-lib-page .moss-lib-more-soon,
html body .moss-lib-page .moss-lib-top-slide > .moss-lib-more-soon {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: 0 !important;
gap: 0 !important;
justify-content: flex-start !important;
overflow: hidden !important;
}
html body .moss-lib-page .moss-lib-more-soon-cover {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
width: 100% !important;
display: flex !important;
align-items: flex-end !important;
padding: 0.65rem 0.75rem !important;
border-bottom: 1px dashed color-mix(in oklab, var(--color-gold) 18%, transparent) !important;
background:
radial-gradient(
120% 80% at 50% 0%,
color-mix(in oklab, var(--color-gold) 10%, transparent),
transparent 62%
),
color-mix(in oklab, var(--color-bg) 55%, transparent) !important;
}
html body .moss-lib-page .moss-lib-more-soon-copy {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0.2rem !important;
padding: 0.65rem 0.75rem 0.7rem !important;
}
html body .moss-lib-page .moss-lib-more-soon-kicker,
html body .moss-lib-page .moss-lib-more-soon-title,
html body .moss-lib-page .moss-lib-more-soon-body {
margin: 0 !important;
}
/* Phone filled + empty: locked 2-col. List left sticky, cards stacked right. */
@media (max-width: 979px) {
html body .book-switcher {
--moss-nav-col: 7.15rem;
--moss-shelf-gap: 0.45rem;
}
html body .book-switcher .series-layout,
html body .book-switcher:not(.is-empty-layout) .series-layout,
html body .book-switcher.is-empty-layout .series-layout,
html body .book-switcher.is-studio .series-layout,
html body .book-switcher[data-view="shelf"] .series-layout,
html body .book-switcher[data-view="studio"] .series-layout,
html body .book-switcher .series-layout.moss-desk-3,
html body .book-switcher.is-studio .series-layout.moss-desk-3 {
display: grid !important;
flex-direction: unset !important;
grid-template-columns: var(--moss-nav-col, 7.15rem) minmax(0, 1fr) !important;
grid-template-rows: auto !important;
column-gap: 0.5rem !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
margin: 0 !important;
padding-top: 0 !important;
padding-left: 0 !important;
}
html body .book-switcher .series-top-row,
html body .book-switcher .series-scroll {
display: contents !important;
}
html body .book-switcher .series-right,
html body .book-switcher.is-studio .series-right,
html body .book-switcher.is-empty-layout .series-right,
html body .book-switcher:not(.is-empty-layout) .series-right {
display: flex !important;
flex-direction: column !important;
grid-column: 2 !important;
grid-row: 1 !important;
gap: 0.45rem !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
height: var(--series-nav-stick-h, calc(100svh - var(--moss-header-h, 3.7rem) - var(--moss-banner-h, 0px) - var(--moss-player-inset, 17.75rem) - 0.7rem)) !important;
max-height: var(--series-nav-stick-h, calc(100svh - var(--moss-header-h, 3.7rem) - var(--moss-banner-h, 0px) - var(--moss-player-inset, 17.75rem) - 0.7rem)) !important;
min-height: 10rem !important;
margin: 0 !important;
padding: 0 0 0.35rem !important;
position: relative !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
html body .book-switcher .series-nav,
html body .book-switcher .series-nav.is-phone-fixed,
html body .book-switcher:not(.is-empty-layout) .series-nav,
html body .book-switcher:not(.is-empty-layout) .series-nav.is-phone-fixed,
html body .book-switcher.is-empty-layout .series-nav,
html body .book-switcher.is-empty-layout .series-nav.is-phone-fixed,
html body .book-switcher.is-studio .series-nav {
display: flex !important;
flex-direction: column !important;
grid-column: 1 !important;
grid-row: 1 !important;
position: sticky !important;
top: var(--series-nav-stick-top, 0.35rem) !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: var(--moss-nav-col, 7.15rem) !important;
min-width: 0 !important;
max-width: var(--moss-nav-col, 7.15rem) !important;
height: var(
--series-nav-stick-h,
calc(
100svh - var(--moss-header-h, 3.7rem) - var(--moss-banner-h, 0px) -
var(--moss-player-inset, 17.75rem) - 0.7rem
)
) !important;
max-height: var(
--series-nav-stick-h,
calc(
100svh - var(--moss-header-h, 3.7rem) - var(--moss-banner-h, 0px) -
var(--moss-player-inset, 17.75rem) - 0.7rem
)
) !important;
min-height: 10rem !important;
align-self: start !important;
margin: 0 !important;
z-index: 2 !important;
overflow: hidden !important;
}
html body .book-switcher .series-nav-list,
html body .book-switcher .series-nav-list-sortable,
html body .book-switcher .moss-empty-book-list {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
width: 100% !important;
}
html body .book-switcher .series-pick {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
html body .book-switcher .series-main,
html body .book-switcher .series-main-stack,
html body .book-switcher .moss-empty-note-col {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
max-height: none !important;
grid-column: unset !important;
grid-row: unset !important;
flex: none !important;
}
html body .book-switcher .book-switcher-chapters {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
grid-column: unset !important;
grid-row: unset !important;
flex: none !important;
padding: 0 0 0.75rem !important;
}
html body .book-switcher .series-main-stack > .book-card,
html body .book-switcher .series-main-stack > .author-card-anchor,
html body .book-switcher .moss-ident-slim,
html body .book-switcher .book-card,
html body .book-switcher .moss-author-card,
html body .book-switcher .chapter-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
}
@media (max-width: 979px) {
html body .moss-sheet.moss-lib-detail-sheet,
html body [data-radix-dialog-content].moss-lib-detail-sheet,
html.moss-lib-detail-open .moss-sheet.moss-lib-detail-sheet,
html.moss-lib-detail-open [data-radix-dialog-content].moss-lib-detail-sheet {
animation: none !important;
transition: none !important;
position: fixed !important;
inset: auto !important;
top: calc(
(
var(--moss-header-bottom, 4.2rem) + 100dvh -
var(--moss-player-clearance, 4.85rem)
) / 2
) !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
translate: none !important;
width: min(100vw - 1.6rem, 21rem) !important;
max-width: min(100vw - 1.6rem, 21rem) !important;
height: fit-content !important;
max-height: calc(
100dvh - var(--moss-header-bottom, 4.2rem) -
var(--moss-player-clearance, 4.85rem) - 0.5rem
) !important;
overflow: auto !important;
z-index: 530 !important;
}
}
/* Loading splash: true viewport center */
html body .moss-session-resume {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 2300 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.85rem !important;
width: 100% !important;
max-width: none !important;
height: 100dvh !important;
min-height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
translate: none !important;
background: #0c100b !important;
}
html body .moss-studio-loading {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
width: 100% !important;
min-height: calc(
100dvh - var(--moss-header-bottom, calc(var(--grok-banner-h, 0px) + 3.85rem)) -
var(--moss-player-clearance, 4.85rem)
) !important;
margin: 0 !important;
padding: 0 !important;
}
/* Publishing as + author pencils match book-card tools; label off the corner */
html body .moss-ident-slim {
padding: 0.42rem 0.5rem 0.4rem !important;
margin: 0 !important;
}
html body .moss-ident-slim .moss-ident-tools {
top: 0.22rem !important;
right: 0.22rem !important;
bottom: auto !important;
left: auto !important;
inset: 0.22rem 0.22rem auto auto !important;
}
html body .moss-ident-slim .moss-ident-head {
display: flex !important;
align-items: center !important;
min-height: 1.7rem !important;
padding: 0.06rem 1.85rem 0.1rem 0.08rem !important;
}
html body .moss-ident-slim .book-card-tool-oval,
html body .moss-author-card .moss-author-card-actions.book-card-tool-oval {
padding: 0.06rem !important;
}
html body .book-card .book-card-tool-btn {
width: 1.7rem !important;
height: 1.7rem !important;
min-width: 1.7rem !important;
min-height: 1.7rem !important;
}
html body .moss-ident-slim .book-card-tool-btn,
html body .moss-author-card .book-card-tool-btn {
width: 1.38rem !important;
height: 1.38rem !important;
min-width: 1.38rem !important;
min-height: 1.38rem !important;
}
html body .book-card .book-card-tool-btn svg {
width: 0.875rem !important;
height: 0.875rem !important;
}
html body .moss-ident-slim .book-card-tool-btn svg,
html body .moss-author-card .book-card-tool-btn svg {
width: 0.72rem !important;
height: 0.72rem !important;
}
html body .moss-author-card .moss-author-card-actions.book-card-tool-oval {
position: absolute !important;
top: 0.22rem !important;
right: 0.22rem !important;
z-index: 6 !important;
display: inline-flex !important;
}
html body .moss-author-card .moss-author-card-top {
padding-right: 1.85rem !important;
}
/* Collapsed author card hugs Tap for more */
@media (max-width: 979px) {
html body .moss-author-card:not(.is-desktop-open):not(.is-expanded),
html body .book-switcher:not(.is-empty-layout) .moss-author-card:not(.is-desktop-open):not(.is-expanded),
html body .book-switcher .moss-author-card.has-links:not(.is-expanded):not(.is-desktop-open) {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0.36rem 0.62rem 0.08rem !important;
}
html body .moss-author-card-tap-hint,
html body .moss-author-card .moss-author-card-tap-hint,
html body .moss-author-card .book-card-tap-hint {
margin: 0.04rem 0 0 !important;
padding: 0.04rem 0 0.02rem !important;
}
}
/* Publishing as uses the same stack gap as book → author. */
html body .moss-ident-slim,
html body .book-switcher .moss-ident-slim,
html body .book-switcher .series-main-stack > .moss-ident-slim {
margin: 0 !important;
}
/* Phone: one stack gap under Continue; book list sits just above the player. */
html body .book-continue-wrap {
margin: 0 !important;
padding: 0 !important;
}
html body .moss-desk-banner-stack,
html body [data-moss-banner-stack] {
margin: 0 0 0.45rem !important;
padding: 0 !important;
}
html body .moss-banner-stack-spacer {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 979px) {
html body .book-switcher .series-nav,
html body .book-switcher .series-nav.is-phone-fixed,
html body .book-switcher:not(.is-empty-layout) .series-nav {
top: var(--series-nav-stick-top, 0px) !important;
margin: 0 !important;
}
}
/* Phone: small gap under the header — same width as the card stack. */
@media (max-width: 979px) {
html body .moss-tab-panel--shelf,
html body .moss-tab-panel--shelf.is-on,
html body .moss-tab-panel--lib,
html body .moss-tab-panel--lib.is-on {
padding-top: 0.45rem !important;
}
html body .moss-lib-page,
html body .moss-tab-panel--lib.is-on .moss-lib-page {
padding-top: 0 !important;
}
html body .moss-desk-banner-stack,
html body [data-moss-banner-stack] {
margin-top: 0 !important;
}
html body .moss-desk-banner-stack:empty,
html body [data-moss-banner-stack]:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
}
/* Opened library book card: true center between header and player. */
html body .moss-sheet.moss-lib-detail-sheet,
html body [data-radix-dialog-content].moss-lib-detail-sheet,
html.moss-lib-detail-open .moss-sheet.moss-lib-detail-sheet,
html.moss-lib-detail-open [data-radix-dialog-content].moss-lib-detail-sheet {
position: fixed !important;
inset: auto !important;
top: calc(
(
var(--moss-header-bottom, 4.2rem) + 100dvh -
var(--moss-player-clearance, 4.85rem)
) / 2
) !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: min(100vw - 1.6rem, 21rem) !important;
max-width: min(100vw - 1.6rem, 21rem) !important;
height: fit-content !important;
max-height: calc(
100dvh - var(--moss-header-bottom, 4.2rem) -
var(--moss-player-clearance, 4.85rem) - 0.5rem
) !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
translate: none !important;
animation: none !important;
transition: none !important;
overflow: auto !important;
z-index: 530 !important;
}
/* Login + loading: true viewport center (full screen, not the scrollbar box). */
html:has(.moss-gate),
html:has(.moss-session-resume) {
width: 100% !important;
height: 100% !important;
min-height: 100dvh !important;
overflow: hidden !important;
}
html:has(.moss-gate) body,
html:has(.moss-session-resume) body {
width: 100% !important;
height: 100% !important;
min-height: 100dvh !important;
overflow: hidden !important;
}
html body .moss-session-resume {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
inset: auto !important;
z-index: 2300 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.85rem !important;
box-sizing: border-box !important;
width: 100vw !important;
max-width: none !important;
height: 100dvh !important;
min-height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
translate: none !important;
background: #0c100b !important;
}
/* Never keep the boot splash over the app / login. */
html.moss-ready #moss-first-gate,
html.moss-booted #moss-first-gate,
html.moss-ready #moss-first-gate.moss-boot-wait,
html.moss-booted #moss-first-gate.moss-boot-wait,
html body:has(.moss-gate) #moss-first-gate,
html body:has(.app-shell) #moss-first-gate,
html body #moss-first-gate[hidden] {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: -1 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
html body main.moss-gate,
html body .moss-gate {
position: relative !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
width: 100vw !important;
max-width: none !important;
min-height: 100dvh !important;
height: 100dvh !important;
margin: 0 !important;
padding: 1.25rem 1rem !important;
padding-top: 1.25rem !important;
padding-bottom: 1.25rem !important;
overflow: hidden auto !important;
}
html body .moss-gate-inner {
position: static !important;
box-sizing: border-box !important;
width: min(22.5rem, calc(100vw - 2rem)) !important;
max-width: min(22.5rem, calc(100vw - 2rem)) !important;
margin: 0 auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
transform: none !important;
}
/* Keep the login card still while Google / X opens — no font swap. */
html.moss-oauth-leaving .moss-gate,
html.moss-oauth-leaving .moss-gate * {
pointer-events: none !important;
transition: none !important;
animation: none !important;
}
html.moss-oauth-leaving .moss-gate-title,
html.moss-oauth-leaving .moss-gate-panel-title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
}
html.moss-oauth-leaving .moss-gate,
html.moss-oauth-leaving .moss-gate-oauth-btn,
html.moss-oauth-leaving .moss-gate-input {
font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}