[hidden] { display: none !important; }
.reader-button { display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border: 1px solid #c094ef; border-radius: 8px; background: #754197; color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.5; box-shadow: 0 4px 12px #0004; }
.reader-button:hover:not(:disabled) { background: #8952ad; }
.reader-secondary { background: transparent; }
.reader-entry-actions { width: 100%; max-width: 520px; }
.reader-resume { display: flex; width: 100%; margin-top: 14px; background: #462959; text-align: left; border: 2px solid #ddbeff; }
.reader-resume-progress { display: block; width: 100%; height: 12px; margin-top: 10px; border: 0; border-radius: 999px; overflow: hidden; background: #302238; accent-color: #c094ef; }
.reader-resume-progress::-webkit-progress-bar { background: #302238; border-radius: 999px; }
.reader-resume-progress::-webkit-progress-value { background: #c094ef; border-radius: 999px; }
.reader-resume-progress::-moz-progress-bar { background: #c094ef; border-radius: 999px; }
.reader-progress { position: fixed; top: 65vh; left: 4px; z-index: 60; width: 70px; height: 48px; border: 0; padding: 0; background: transparent; color: white; cursor: pointer; filter: drop-shadow(0 3px 3px #0008); transition: filter .15s; }
.reader-progress:hover { filter: drop-shadow(0 3px 6px #754197); }
.reader-progress svg { width: 100%; height: 100%; fill: #754197; stroke: #e1c4ff; stroke-width: 2; }
.reader-progress span { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 75%; font-size: 15px; font-weight: 800; }
.story-content.reader-markable { padding-left: 82px; }
.reader-finish { margin: 28px 0; padding: 32px 18px; text-align: center; background: #1d1425; border: 1px solid #614477; border-radius: 12px; }
.reader-stars { display: flex; justify-content: center; gap: 6px; }
.reader-stars button { border: 0; background: none; color: #998c9f; font-size: 38px; line-height: 1; min-width: 44px; min-height: 48px; cursor: pointer; }
.reader-stars button.selected, .reader-stars button:hover:not(:disabled) { color: #ffd274; }
.reader-stars button:disabled { cursor: default; opacity: .45; }
.reader-muted { color: #c6bccc; font-size: .92rem; }
.reader-dialog { width: min(470px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; box-sizing: border-box; padding: 32px; border: 1px solid #9168ac; border-radius: 16px; background: #1d1425; color: #f7f0ff; box-shadow: 0 20px 80px #000a; }
.reader-dialog::backdrop { background: #08050dcc; backdrop-filter: blur(4px); }
.reader-dialog h2 { font-size: 1.6rem; line-height: 1.2; margin: 12px 0; }
.reader-dialog p { line-height: 1.5; }
.reader-close { position: absolute; right: 8px; top: 4px; background: transparent; border: none; color: #fff; font-size: 30px; width: 40px; height: 40px; cursor: pointer; }
.reader-auth-tabs { display: flex; gap: 8px; margin: 22px 0 16px; }
.reader-auth-tabs button { flex: 1; padding: 10px; border: 1px solid #79548e; border-radius: 6px; color: #fff; background: transparent; cursor: pointer; }
.reader-auth-tabs button[aria-pressed="true"] { background: #754197; }
.reader-dialog label { display: block; font-weight: 600; margin-top: 12px; }
.reader-dialog input { display: block; box-sizing: border-box; width: 100%; margin-top: 5px; border: 1px solid #866796; border-radius: 6px; padding: 11px; background: #100b17; color: #fff; font-size: 16px; }
.reader-dialog form > .reader-button { width: 100%; }
.reader-error { color: #ffb1b1; }
.reader-error:empty { display: none; }
.reader-dialog-actions { display: flex; gap: 12px; margin-top: 24px; }
.reader-dialog-actions button { flex: 1; }
.reader-toast { position: fixed; bottom: 24px; left: 106px; right: 20px; width: fit-content; max-width: 460px; padding: 16px 20px; border: 1px solid #c094ef; border-radius: 8px; background: #281934; color: #fff; box-shadow: 0 4px 24px #0008; z-index: 80; }
.reader-dashboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.reader-dashboard h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.reader-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 24px; margin: 32px 0; }
.reader-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #614477; background: #1d1425; border-radius: 10px; }
.reader-card-cover { display: block; background: #100b17; }
.reader-card-cover img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.reader-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.reader-card h2 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 12px; }
.reader-card-status { margin-top: auto; }
.reader-card progress { width: 100%; accent-color: #c094ef; }
.reader-card .reader-button { margin: 16px 0 12px; padding: 11px 8px; font-size: .86rem; }
.reader-card .reader-stars { gap: 0; }
.reader-card .reader-stars button { min-width: 40px; font-size: 30px; padding: 0; }
.reader-card-rating-status { text-align: center; font-size: .8rem; margin: 6px 0 0; }
.main-menu .reader-menu { color: #e1c4ff; border-color: #79548e; }
.reader-mobile-account { display: none; }
.reader-button.reader-continue, .reader-button.reader-resume { background: #462959; border-color: #ddbeff; }
.reader-button.reader-reread, .read-button.reader-reread { background: #185b53; border-color: #80cdb8; color: #fff; }
.reader-button.reader-reread:hover, .read-button.reader-reread:hover { background: #23796d; }
.reader-account-nav { display: flex; align-items: center; gap: 8px; padding: 10px; margin: 20px 0 28px; background: #1d1425; border: 1px solid #614477; border-radius: 10px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.reader-account-nav a, .reader-account-nav button { flex: 0 0 auto; scroll-snap-align: start; color: #e8dfee; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 12px 14px; font: 700 .8rem sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.reader-account-nav a[aria-current], .reader-account-nav a:hover { background: #462959; border-color: #9168ac; }
.reader-account-nav #reader-logout { margin-left: auto; color: #ffb1b1; }
.reader-account-panel { max-width: 650px; padding: 24px; background: #1d1425; border: 1px solid #614477; border-radius: 12px; }
.reader-account-form label { display: block; margin: 16px 0; }
.reader-account-form input:not([type="checkbox"]) { box-sizing: border-box; display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid #79548e; border-radius: 6px; background: #100b17; color: #fff; font-size: 16px; }
.reader-account-form input[readonly] { opacity: .65; }
.reader-delete-account { border-top: 1px solid #614477; margin-top: 32px; padding-top: 24px; }
.reader-delete-account summary { color: #ffb1b1; cursor: pointer; }
.reader-account-form .reader-delete-confirm { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.reader-delete-confirm input { margin-top: 5px; }
.reader-button.reader-danger { background: #812f3d; border-color: #eb9aa7; }
.reader-progress-tip { position: fixed; z-index: 61; width: min(320px, calc(100vw - 32px)); box-sizing: border-box; border: 1px solid #e1c4ff; border-radius: 12px; padding: 18px; color: #fff; background: #462959; box-shadow: 0 8px 30px #0008; animation: reader-tip-expand .25s ease-out; }
.reader-progress-tip p { margin: 0 0 14px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.reader-progress-tip::before { content: ''; position: absolute; left: -9px; top: 25px; width: 16px; height: 16px; background: #462959; border-left: 1px solid #e1c4ff; border-bottom: 1px solid #e1c4ff; transform: rotate(45deg); }
.reader-progress-tip button { padding: 9px 16px; border: 1px solid #e1c4ff; border-radius: 6px; background: #f0e1ff; color: #321b42; font-weight: 700; cursor: pointer; }
@keyframes reader-tip-expand { from { opacity: 0; transform: translateX(-16px) scaleX(.8); } to { opacity: 1; transform: none; } }
@keyframes reader-arrow-enter { 0% { opacity: 0; transform: translateX(-90px); } 65% { opacity: 1; transform: translateX(8px); } 82% { transform: translateX(-4px); } 100% { transform: translateX(0); } }
@media (min-width: 861px) { .public-page .header-bottom, .public-page .main-menu { justify-content: center; } .public-page .main-menu { width: 100%; } .story-content.reader-markable { padding-left: 82px; padding-right: 82px; margin-left: auto; margin-right: auto; } }
@media (max-width: 860px) {
  .public-page .site-header .header-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  .reader-mobile-account { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #79548e; border-radius: 7px; color: #e1c4ff; }
  .reader-mobile-account svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .public-page .site-header .menu-toggle { min-width: 40px; min-height: 40px; justify-content: center; padding: 4px; }
  .reader-progress { visibility: hidden; pointer-events: none; }
  .reader-progress.reader-arrow-visible { visibility: visible; pointer-events: auto; animation: reader-arrow-enter .6s ease-out; }
  .reader-account-nav { margin-left: -8px; margin-right: -8px; }
}
@media (prefers-reduced-motion: reduce) { .reader-progress.reader-arrow-visible, .reader-progress-tip { animation: none; } }
@media (max-width: 600px) { .reader-dialog { padding: 28px 20px; } .reader-progress { width: 56px; height: 44px; } .reader-progress span { font-size: 12px; } .story-content.reader-markable { padding-left: 68px; } .reader-toast { left: 20px; font-size: 14px; } .reader-dashboard-heading { align-items: flex-start; } }

/* Equal border boxes, including padding and borders. */
@media (max-width: 860px) {
  .public-page .site-header .reader-mobile-account,
  .public-page .site-header .menu-toggle {
    box-sizing: border-box; flex: 0 0 40px; width: 40px; height: 40px;
    min-width: 40px; min-height: 40px; padding: 4px; margin: 0;
    border: 1px solid #79548e; border-radius: 7px; line-height: 1;
  }
}
.reader-account-nav { scroll-padding-inline: 10px; scrollbar-color: #c094ef #302238; }
.reader-account-nav::-webkit-scrollbar { height: 6px; }
.reader-account-nav::-webkit-scrollbar-track { background: #302238; }
.reader-account-nav::-webkit-scrollbar-thumb { background: #c094ef; border-radius: 999px; }
.reader-nav-track { height: 5px; margin: -20px 0 28px; border-radius: 999px; background: #302238; overflow: hidden; }
.reader-nav-thumb { display: block; height: 100%; border-radius: inherit; background: #c094ef; }
.reader-account-nav.is-hinting { scroll-snap-type: none; }