@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --page: #0e0b13;
  --surface: #18131f;
  --surface-soft: #211a2b;
  --text: #f0ebf5;
  --muted: #aba2b6;
  --accent: #9679c4;
  --accent-strong: #d1c0eb;
  --border: rgba(255, 255, 255, 0.09);
  --copy-size: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at 50% -30%, #312543 0, var(--page) 44rem);
  font-family: Manrope, sans-serif;
}

.reader-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.brand, .story-context a, .byline a { color: inherit; text-decoration: none; }
.brand { font-size: 14px; font-weight: 800; letter-spacing: .13em; }
.brand span span { color: var(--accent); }
.brand-mark { color: var(--accent); margin-right: 8px; font-size: 18px; }
.settings-button, .font-controls button {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font: 700 13px Manrope, sans-serif;
}
.settings-button:hover, .font-controls button:hover { border-color: var(--accent); color: var(--accent-strong); }
.settings-label { margin-left: 6px; }
.settings-popover {
  position: absolute;
  z-index: 2;
  top: 60px;
  right: 5vw;
  width: 180px;
  padding: 16px;
  background: #211f2d;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}
.settings-popover p { color: var(--muted); font: 11px 'DM Mono', monospace; letter-spacing: .08em; margin: 0 0 12px; text-transform: uppercase; }
.font-controls { display: flex; gap: 8px; }
.font-controls button { flex: 1; padding: 8px; }

.reader-shell { width: min(100% - 40px, 820px); margin: 0 auto; padding: 72px 0 56px; }
.story-context { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.story-context a { color: #cdc3e2; font-weight: 700; }
.story-context a:hover, .byline a:hover { color: var(--accent-strong); }
.eyebrow, .chapter-number, .end-mark, .button-kicker { font: 500 11px 'DM Mono', monospace; letter-spacing: .1em; }
.eyebrow { color: var(--accent-strong); }
.dot { color: #625d6b; }
.chapter-heading { text-align: center; padding: 26px 0 8px; }
.chapter-number { color: var(--accent-strong); margin: 0 0 14px; }
h1 { max-width: 700px; margin: 0 auto; font: 600 clamp(38px, 6vw, 58px)/1.08 Fraunces, Georgia, serif; letter-spacing: -.03em; }
.byline { color: var(--muted); margin: 16px 0; font-size: 14px; }
.byline a { color: #d9d2e8; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--accent); margin: 36px 0 42px; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.divider span { font-size: 14px; }

.chapter-copy { color: #e2dfe6; font: 500 var(--copy-size)/1.9 Fraunces, Georgia, serif; }
.chapter-copy p { margin: 0 0 1.65em; }
.chapter-copy em { color: #d5bbff; }
.chapter-footer { padding-top: 30px; }
.end-mark { color: #827c8b; text-align: center; margin: 0 0 26px; }
.chapter-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chapter-button {
  min-height: 104px;
  padding: 20px 22px;
  color: var(--text);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.chapter-button.next { text-align: right; background: linear-gradient(130deg, #302250, #432a70); border-color: #6d48a3; }
.chapter-button:not(:disabled):hover { transform: translateY(-3px); border-color: var(--accent-strong); }
.chapter-button:disabled { cursor: not-allowed; opacity: .38; }
.button-kicker { display: block; color: var(--muted); margin-bottom: 9px; }
.chapter-button.next .button-kicker { color: #d2b6ff; }
.chapter-button strong { font-size: 17px; }

@media (max-width: 600px) {
  :root { --copy-size: 18px; }
  .reader-header { padding: 0 20px; }
  .settings-label { display: none; }
  .reader-shell { width: min(100% - 32px, 820px); padding-top: 52px; }
  .chapter-navigation { grid-template-columns: 1fr; }
  .chapter-button { min-height: 88px; }
}

/* Homepage */
.home-page { overflow-x: hidden; background: linear-gradient(180deg, #131421 0, #10111a 35rem); }
.home-page a { color: inherit; text-decoration: none; }
.home-page .brand { display: inline-flex; align-items: center; font-size: 14px; font-weight: 800; letter-spacing: .13em; white-space: nowrap; }
.site-header { height: 72px; max-width: 1240px; margin: auto; padding: 0 32px; display: flex; align-items: center; gap: 44px; }
.main-nav { display: flex; gap: 26px; color: var(--muted); font-size: 13px; }
.main-nav a { padding: 26px 0 22px; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav .active { color: var(--text); border-color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 12px; font-weight: 700; }
.icon-button, .mobile-menu { border: 0; color: var(--text); background: transparent; cursor: pointer; font-size: 25px; line-height: 1; }
.login-link { color: var(--muted); }
.join-button, .primary-button { background: var(--accent); color: #16111d; border-radius: 7px; padding: 11px 16px; font-size: 12px; font-weight: 800; transition: transform .18s, background .18s; }
.join-button:hover, .primary-button:hover { background: #c69bff; transform: translateY(-2px); }
.mobile-menu { display: none; }
.mobile-nav { position: absolute; z-index: 5; top: 72px; left: 0; right: 0; padding: 16px 32px; background: #1b1b2a; border-top: 1px solid var(--border); }
.mobile-nav a { display: block; padding: 11px 0; font-weight: 700; }
.search-panel { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); width: min(600px, calc(100% - 40px)); padding: 18px; background: #242235; border: 1px solid rgba(182,129,255,.4); border-radius: 0 0 13px 13px; box-shadow: 0 20px 50px #0008; }
.search-panel label { display: block; color: var(--accent-strong); font: 500 11px 'DM Mono',monospace; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.search-panel div { display: flex; }.search-panel input { flex: 1; padding: 13px; color: var(--text); background: #10111a; border: 1px solid var(--border); border-radius: 6px 0 0 6px; outline: none; }.search-panel button { width: 46px; border: 0; color: var(--text); background: #39324f; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 22px; }
.hero { min-height: 480px; position: relative; max-width: 1176px; margin: auto; display: flex; align-items: center; padding: 54px 48% 64px 32px; }
.hero::before { content: ''; position: absolute; inset: 0 -10vw; z-index: -1; background: radial-gradient(circle at 73% 48%,#753eab 0,rgba(72,39,118,.65) 14%,transparent 41%),radial-gradient(ellipse at 90% 10%,#244571 0,transparent 28%); }
.hero-copy { position: relative; z-index: 1; }.overline { margin: 0 0 10px; color: var(--accent-strong); font: 500 11px 'DM Mono',monospace; letter-spacing: .1em; }.hero h1 { max-width: 620px; margin: 0; font: 600 clamp(43px,5vw,72px)/1.01 Fraunces,Georgia,serif; letter-spacing: -.04em; }.hero-description { max-width: 510px; color: #c8c5d1; font-size: 15px; line-height: 1.7; margin: 22px 0 18px; }.story-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #d7c7ed; font-size: 11px; }.hero-actions { display: flex; align-items: center; gap: 21px; margin-top: 28px; }.primary-button { display: inline-flex; align-items: center; gap: 18px; padding: 13px 17px; }.primary-button span,.section-heading a span { font-size: 16px; }.secondary-button { color: #dfd9e8; font-size: 12px; font-weight: 800; }.secondary-button:hover { color: var(--accent-strong); }
.hero-art { position: absolute; right: -20px; bottom: 0; width: min(48vw,560px); height: 100%; overflow: hidden; background: radial-gradient(ellipse at 48% 23%,#f4b5e0 0,rgba(215,104,192,.65) 10%,transparent 30%),radial-gradient(ellipse at 76% 70%,#7145c7 0,transparent 45%),linear-gradient(135deg,#1e3155,#41234e 50%,#120e24); }.hero-art::before { content: ''; position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#fff 1px,transparent 1.5px); background-size: 47px 53px,75px 91px; background-position: 0 0,18px 23px; }.hero-art p { position: absolute; z-index: 2; right: 9%; bottom: 10%; margin: 0; font: 600 clamp(28px,3.5vw,48px)/.84 Fraunces,serif; letter-spacing: -.06em; text-align: right; }.hero-art em { color: #e4bdf8; font-weight: 500; }.planet { position: absolute; z-index: 1; border-radius: 50%; }.planet-one { right: 10%; top: 13%; width: 142px; height: 142px; background: linear-gradient(130deg,#efd1e6,#d286c9 48%,#51358e 50%,#2c2058); box-shadow: 0 0 50px #ffb3e844; }.planet-two { left: 8%; bottom: -38px; width: 190px; height: 190px; background: linear-gradient(140deg,#4f9dc5,#40308d 42%,#211e59 43%,#111229); }.station-window { position: absolute; z-index: 2; right: 18%; top: 15%; width: 150px; height: 210px; border: 10px solid #17142d; border-radius: 80px 80px 12px 12px; background: linear-gradient(135deg,rgba(207,180,255,.5),transparent 35%),#2b2051; transform: rotate(12deg); box-shadow: 0 0 0 3px #716296,0 15px 30px #0008; }.window-glow { width: 100%; height: 100%; border-radius: inherit; background: radial-gradient(circle at 55% 30%,#ffe3f4 0,transparent 8%),linear-gradient(160deg,#a56ad9,#432b8a 70%); opacity: .8; }.star { position: absolute; z-index: 2; color: #fff; text-shadow: 0 0 9px #fff; }.s1 { top: 17%; left: 20%; }.s2 { top: 34%; left: 46%; font-size: 22px; }.s3 { top: 64%; right: 9%; }
.page-section { max-width: 1176px; margin: 0 auto; padding: 70px 32px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }.section-heading h2,.rankings h2,.callout h2 { margin: 0; font: 600 30px/1.05 Fraunces,Georgia,serif; letter-spacing: -.03em; }.section-heading a { color: #d7b7ff; font-size: 12px; font-weight: 800; }.story-shelf { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; }.story-card { min-width: 0; }.cover { height: 250px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 18px; overflow: hidden; border-radius: 6px; box-shadow: inset 0 0 0 1px #ffffff1a,0 12px 20px #0004; transition: transform .2s; }.story-card:hover .cover { transform: translateY(-5px); }.cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 35%,#06060bcc); }.cover span,.cover strong,.cover i { position: relative; z-index: 1; }.cover span { font: 500 9px 'DM Mono',monospace; letter-spacing: .12em; }.cover strong { margin-top: 5px; font: 600 26px/.85 Fraunces,serif; letter-spacing: -.07em; }.cover i { align-self: end; margin-top: auto; font-size: 24px; }.cover-tide { background: radial-gradient(circle at 70% 20%,#f4c98c 0,transparent 15%),linear-gradient(140deg,#0d777b,#15355d 55%,#112033); }.cover-rose { background: radial-gradient(circle at 32% 25%,#e885a2 0,transparent 24%),linear-gradient(135deg,#552337,#1f1832); }.cover-moon { background: radial-gradient(circle at 73% 23%,#f8dea6 0,transparent 13%),linear-gradient(145deg,#27526d,#1d2655 63%,#171329); }.cover-ember { background: radial-gradient(circle at 50% 10%,#e9894e 0,transparent 30%),linear-gradient(160deg,#6d2633,#21192d 70%); }.cover-ink { background: radial-gradient(circle at 60% 40%,#7e8ea8 0,transparent 28%),linear-gradient(145deg,#252b42,#13131e); }.story-card h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 13px 0 3px; font-size: 13px; }.story-card p { overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.card-meta { display: flex; justify-content: space-between; margin-top: 9px; color: #d6b2ff; font-size: 10px; }
.content-grid { max-width: 1176px; margin: 0 auto; padding: 0 32px 72px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(290px,.7fr); gap: 24px; }.content-grid .page-section { padding: 0; }.latest,.rankings { padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; }.latest .section-heading { margin-bottom: 16px; }.update-list { display: grid; }.update { min-width: 0; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }.update:hover h3 { color: var(--accent-strong); }.update-art { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 5px; font-size: 21px; }.galaxy { background: radial-gradient(circle at 60% 30%,#eed0fa 0,transparent 12%),linear-gradient(135deg,#513491,#1c214e); }.ocean { background: linear-gradient(145deg,#46a5a5,#1d385f); }.floral { background: linear-gradient(145deg,#bd5574,#422248); }.gold { background: linear-gradient(145deg,#c79447,#34305f); }.update h3 { margin: 0 0 3px; font-size: 12px; }.update p,.rankings p { margin: 0; color: var(--muted); font-size: 10px; }.update time { color: #8b8797; font: 10px 'DM Mono',monospace; }.rankings-heading { margin-bottom: 14px; }.rankings h2 { font-size: 25px; }.rankings ol { list-style: none; padding: 0; margin: 0; }.rankings li { display: grid; grid-template-columns: 25px 1fr auto; gap: 8px; align-items: start; padding: 13px 0; border-top: 1px solid var(--border); }.rankings li>span { color: var(--accent); font: 500 10px 'DM Mono',monospace; padding-top: 2px; }.rankings li a { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; }.rankings li a:hover { color: var(--accent-strong); }.rankings b { color: #d5b0ff; font-size: 10px; }.callout { max-width: 1112px; margin: 0 auto 70px; padding: 42px 44px; display: flex; align-items: center; justify-content: space-between; gap: 36px; background: linear-gradient(110deg,#2a1d47,#19182b 70%); border: 1px solid #a76dff42; border-radius: 12px; }.callout h2 { max-width: 620px; font-size: 33px; }.callout p:not(.overline) { max-width: 630px; color: var(--muted); font-size: 13px; line-height: 1.7; margin: 12px 0 0; }.site-footer { max-width: 1176px; margin: auto; padding: 24px 32px 38px; display: flex; align-items: center; gap: 22px; border-top: 1px solid var(--border); color: #898593; font-size: 11px; }.site-footer .brand { color: var(--text); }.site-footer span:last-child { margin-left: auto; }
@media (max-width: 800px) { .site-header { padding: 0 22px; gap: 22px; }.main-nav { display: none; }.header-actions { gap: 15px; }.hero { padding: 52px 25px 310px; min-height: 650px; }.hero-art { width: 100%; height: 305px; right: 0; bottom: 0; }.hero-art p { bottom: 12%; right: 10%; }.story-shelf { display: flex; overflow-x: auto; padding-bottom: 9px; }.story-card { flex: 0 0 164px; }.cover { height: 225px; }.content-grid { grid-template-columns: 1fr; }.callout { margin: 0 32px 60px; align-items: start; flex-direction: column; } }
@media (max-width: 560px) { .site-header { height: 64px; }.header-actions { display: none; }.mobile-menu { display: block; margin-left: auto; }.mobile-nav { top: 64px; padding: 14px 22px; }.hero { padding: 48px 22px 273px; min-height: 620px; }.hero h1 { font-size: 45px; }.hero-description { font-size: 13px; }.hero-art { height: 270px; }.station-window { width: 104px; height: 155px; }.planet-one { width: 105px; height: 105px; }.planet-two { width: 130px; height: 130px; }.hero-art p { font-size: 31px; }.page-section { padding: 50px 22px; }.section-heading h2 { font-size: 26px; }.content-grid { padding: 0 22px 52px; }.latest,.rankings { padding: 19px; }.update { grid-template-columns: 42px 1fr; }.update-art { width: 42px; height: 42px; }.update time { display: none; }.callout { margin: 0 22px 50px; padding: 30px 25px; }.callout h2 { font-size: 29px; }.site-footer { flex-wrap: wrap; padding: 24px 22px 32px; }.site-footer p { width: 100%; margin: 0; }.site-footer span:last-child { margin-left: 0; } }

/* Compact discovery homepage */
.home-v2 { --violet: #953ee6; --purple: #6e28bf; --orange: #ffbb3d; background: #15131c; color: #fff; font-family: Manrope, Arial, sans-serif; }
.home-v2 a { color: inherit; text-decoration: none; }.home-v2 button { font-family: inherit; }.home-v2 .topbar { height: 43px; display: flex; align-items: stretch; padding: 0 13px; background: linear-gradient(90deg,#a84df0,#7f2ad7); gap: 13px; }.home-logo { display: grid; place-items: center; width: 28px; height: 28px; margin: auto 0; background: #25133a; border: 1px solid #c276ff; border-radius: 50%; font-size: 15px; }.compact-nav { display: flex; align-items: center; gap: 20px; font-size: 10px; font-weight: 800; }.compact-nav a { opacity: .86; }.compact-nav .selected { opacity: 1; }.compact-nav small { font-size: 11px; }.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 10px; font-weight: 800; }.top-actions>a,.search-trigger { height: 30px; padding: 0 11px; border: 0; border-radius: 4px; color: #fff; background: #8d3de0; cursor: pointer; }.search-trigger { display: flex; align-items: center; gap: 10px; background: #2a1740; }.search-trigger kbd { padding: 2px 5px; color: #c4a2e7; background: #41265d; border-radius: 3px; font: 8px 'DM Mono',monospace; }.top-actions .signup { background: #6d26bd; }.menu-toggle { display: none; margin-left: auto; border: 0; color: #fff; background: transparent; font-size: 20px; }.home-v2 .mobile-nav { top: 43px; background: #2e164b; }.quick-search { position: absolute; z-index: 10; top: 43px; right: 12px; display: flex; width: min(350px,calc(100% - 24px)); padding: 8px; background: #2a1740; border: 1px solid #9c4bea; border-radius: 0 0 5px 5px; }.quick-search input { flex: 1; padding: 8px; color: #fff; background: #17121f; border: 1px solid #5d3781; border-radius: 3px 0 0 3px; outline: none; font-size: 11px; }.quick-search button { width: 34px; color: #fff; background: #7e32c9; border: 0; border-radius: 0 3px 3px 0; cursor: pointer; }
.home-v2 .quick-search[hidden],.home-v2 .mobile-nav[hidden] { display: none; }
.premium-strip { min-height: 62px; display: flex; align-items: center; gap: 11px; padding: 8px max(18px,calc((100vw - 1200px)/2)); background: repeating-linear-gradient(135deg,#171222 0,#171222 4px,#1c1628 4px,#1c1628 8px); border-bottom: 1px solid #3a234f; }.premium-mark { display: grid; place-items: center; width: 37px; height: 37px; color: #ffc860; background: #2c1a43; border: 1px solid #754ca0; border-radius: 5px; font-size: 18px; }.premium-strip b { color: #ffc34f; font-size: 10px; }.premium-strip p { margin: 3px 0 0; color: #d0c4da; font-size: 9px; }.premium-strip a { margin-left: auto; padding: 9px 15px; color: #21112f; background: linear-gradient(100deg,#b451f5,#ffbd43); border-radius: 6px; font-size: 10px; font-weight: 800; }.notice-strip { display: flex; align-items: center; height: 28px; padding: 0 max(18px,calc((100vw - 1200px)/2)); color: #fff; background: #e11224; font-size: 9px; font-weight: 700; }.notice-strip span { margin-right: 8px; color: #ffabb4; font-size: 8px; }.notice-strip button { margin-left: auto; border: 0; color: #fff; background: transparent; cursor: pointer; }
.featured-shelf { height: 211px; padding: 11px 0; overflow: hidden; background: #09090e; box-shadow: inset 0 -18px 18px #000; }.shelf-track { display: flex; justify-content: center; gap: 11px; min-width: 950px; }.feature-placeholder { position: relative; width: 123px; height: 180px; overflow: hidden; border: 1px solid #ffffff25; border-radius: 3px; box-shadow: 0 5px 10px #0009; }.feature-placeholder::before,.story-placeholder::before,.mini-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 66% 22%,#ffffff80 0 2%,transparent 3%),linear-gradient(135deg,transparent 48%,#0006 49% 55%,transparent 56%); opacity: .65; }.feature-placeholder::after { content: ''; position: absolute; width: 140%; height: 55%; left: -20%; bottom: -19%; background: #000a; transform: rotate(-12deg); }.feature-placeholder span,.story-placeholder span { position: relative; z-index: 1; display: block; margin: 10px; color: #ffffffcc; font: 10px 'DM Mono',monospace; }.warm,.copper { background: linear-gradient(145deg,#ec8951,#77243b 47%,#1d2037); }.violet,.plum { background: linear-gradient(145deg,#c387fc,#66248c 54%,#1a1a3d); }.ink,.navy { background: linear-gradient(145deg,#7196bc,#182f45 55%,#14182b); }.berry,.rose { background: linear-gradient(145deg,#ce4865,#66233e 52%,#181522); }.blue,.ocean { background: linear-gradient(145deg,#56a2d2,#224268 55%,#17233d); }.mist,.cloud { background: linear-gradient(145deg,#b4b6d8,#63759d 53%,#28304a); }.forest { background: linear-gradient(145deg,#789458,#274832 54%,#18231d); }.lavender { background: linear-gradient(145deg,#c1a6ff,#6357a0 54%,#242044); }.ember { background: linear-gradient(145deg,#e47732,#782929 54%,#241b28); }.gold { background: linear-gradient(145deg,#e6bd64,#87612d 55%,#342519); }.night { background: linear-gradient(145deg,#2b365d,#201f47 54%,#121522); }
.dashboard { max-width: 1200px; display: grid; grid-template-columns: minmax(0,1fr) 282px; gap: 10px; margin: 9px auto; padding: 0 12px; }.main-feed { display: grid; gap: 10px; }.content-panel,.popular-panel { overflow: hidden; background: #201d27; border: 1px solid #2d2935; border-radius: 4px; }.panel-heading { display: flex; align-items: center; justify-content: space-between; height: 43px; padding: 0 13px; }.panel-heading>div { display: flex; align-items: center; gap: 8px; }.panel-icon { display: grid; place-items: center; width: 18px; height: 18px; color: #d39aff; background: #58228f; border-radius: 3px; font-size: 10px; }.panel-icon.book { color: #ffcf58; background: #6e5018; }.panel-heading h1,.panel-heading h2 { margin: 0; font-size: 13px; }.panel-heading em { margin-left: 4px; padding: 2px 4px; color: #1f1710; background: #ffc549; border-radius: 2px; font: 700 7px 'DM Mono',monospace; text-transform: uppercase; }.panel-heading>a { padding: 6px 9px; color: #fff; background: #9b3ee4; border-radius: 3px; font-size: 9px; font-weight: 800; }.panel-heading .gold-link { color: #211707; background: #fbbd2f; }.card-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; padding: 0 13px 13px; }.story-placeholder { position: relative; min-width: 0; height: 159px; overflow: hidden; border: 1px solid #ffffff19; border-radius: 3px; }.story-placeholder::after { content: ''; position: absolute; inset: auto 0 0; height: 48%; background: linear-gradient(transparent,#09090dc9); }.story-placeholder span { position: absolute; top: 0; right: 0; left: auto; padding: 3px 5px; margin: 0; color: #fff; background: #191720aa; border-radius: 0 0 0 3px; font-size: 8px; }.story-placeholder footer { position: absolute; z-index: 2; right: 7px; bottom: 7px; left: 7px; }.story-placeholder footer i,.update-placeholder i,.popular-panel li i { display: block; height: 5px; margin-top: 4px; background: #fff4; border-radius: 4px; }.story-placeholder footer i:nth-child(1) { width: 80%; }.story-placeholder footer i:nth-child(2) { width: 60%; }.story-placeholder footer i:nth-child(3) { width: 44%; background: #efb927; }.updates-panel { min-height: 170px; }.update-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }.update-placeholder { display: flex; align-items: center; gap: 9px; min-height: 61px; padding: 10px 13px; border-top: 1px solid #37323e; }.update-placeholder:nth-child(odd) { border-right: 1px solid #37323e; }.update-placeholder>span { width: 39px; height: 39px; flex: none; border-radius: 3px; background: linear-gradient(135deg,#cb578b,#46366f); }.update-placeholder:nth-child(2)>span { background: linear-gradient(135deg,#4e9cb6,#263256); }.update-placeholder:nth-child(3)>span { background: linear-gradient(135deg,#ae8152,#542b39); }.update-placeholder:nth-child(4)>span { background: linear-gradient(135deg,#9573c6,#263f63); }.update-placeholder>div { flex: 1; }.update-placeholder i { width: 85%; }.update-placeholder i:nth-child(2) { width: 68%; }.update-placeholder i:nth-child(3) { width: 35%; background: #e6ae2e; }
.popular-panel { padding: 0 13px 8px; }.popular-panel header { display: flex; align-items: center; justify-content: space-between; height: 43px; border-bottom: 1px solid #37323e; }.popular-panel h2 { margin: 0; font-size: 13px; }.popular-panel header div { display: flex; gap: 4px; }.popular-panel button { padding: 4px 5px; border: 0; color: #bbb0c9; background: transparent; cursor: pointer; font-size: 7px; font-weight: 800; }.popular-panel button.active { color: #fff; background: #9b3ee4; border-radius: 3px; }.popular-panel ol { margin: 0; padding: 5px 0 0; list-style: none; }.popular-panel li { display: grid; grid-template-columns: 15px 30px 1fr; align-items: center; gap: 8px; min-height: 43px; }.popular-panel li>b { display: grid; place-items: center; width: 14px; height: 14px; color: #fff; background: #953de0; border-radius: 50%; font-size: 8px; }.mini-cover { position: relative; display: block; width: 27px; height: 34px; overflow: hidden; border-radius: 2px; }.popular-panel li div { width: 100%; }.popular-panel li i { width: 86%; }.popular-panel li i:nth-child(2) { width: 56%; height: 4px; background: #f0b72b; }.compact-footer { max-width: 1200px; margin: 0 auto; padding: 18px 12px 26px; color: #a69eae; border-top: 1px solid #332e3d; font-size: 10px; font-weight: 800; letter-spacing: .06em; }.compact-footer span { margin-left: 14px; color: #716978; font-weight: 500; letter-spacing: 0; }
@media (max-width: 720px) { .top-actions { display: none; }.home-v2 .menu-toggle { display: block; }.premium-strip { padding: 8px 16px; }.notice-strip { padding: 0 16px; }.dashboard { grid-template-columns: 1fr; padding: 0 9px; }.popular-panel { display: none; }.card-row { overflow-x: auto; grid-template-columns: repeat(5,137px); }.story-placeholder { height: 183px; }.featured-shelf { height: 175px; }.shelf-track { justify-content: flex-start; min-width: max-content; padding: 0 8px; }.feature-placeholder { width: 105px; height: 152px; }.compact-footer { margin: 0 9px; }.premium-strip a { padding: 8px; }.premium-strip a span { display: none; } }
@media (max-width: 720px) { .card-row,.featured-shelf { scrollbar-width: none; }.card-row::-webkit-scrollbar,.featured-shelf::-webkit-scrollbar { display: none; } }
@media (max-width: 430px) { .compact-nav { gap: 14px; font-size: 9px; }.topbar { padding: 0 9px; }.premium-strip p { max-width: 195px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.premium-strip a { font-size: 9px; }.notice-strip { white-space: nowrap; overflow: hidden; }.update-grid { grid-template-columns: 1fr; }.update-placeholder:nth-child(odd) { border-right: 0; }.panel-heading { padding: 0 10px; }.card-row { padding: 0 10px 10px; } }

/* Starbound celestial homepage */
.home-v3 { --night: #090c18; --night-soft: #10152a; --panel: rgba(20,27,50,.74); --line: rgba(173,194,255,.16); --lilac: #d8c3ff; --blue: #8ba9ff; position: relative; overflow-x: hidden; color: #e9edff; background: radial-gradient(circle at 80% -20%,#293766 0,transparent 33rem),radial-gradient(circle at 5% 38%,#1d315e 0,transparent 31rem),var(--night); font-family: Manrope,Arial,sans-serif; }.home-v3 a { color: inherit; text-decoration: none; }.starfield { position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#c7caff 1px,transparent 1.5px),radial-gradient(#fff 1px,transparent 1.5px); background-size: 101px 97px,157px 143px,241px 193px; background-position: 7px 19px,53px 47px,103px 89px; }.celestial-header,.home-v3 main,.celestial-footer { position: relative; z-index: 1; }.celestial-header { height: 76px; max-width: 1180px; margin: auto; display: flex; align-items: center; gap: 44px; padding: 0 26px; border-bottom: 1px solid var(--line); }.celestial-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 800 12px Manrope,sans-serif; letter-spacing: .19em; }.orb-logo { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: radial-gradient(circle at 65% 35%,#e7dbff 0 10%,#7455ae 11% 20%,#23213d 21%); border: 1px solid #a692dc; border-radius: 50%; font-size: 13px; }.celestial-nav { display: flex; gap: 29px; height: 100%; align-items: center; color: #aeb5d1; font-size: 11px; font-weight: 700; }.celestial-nav a { height: 100%; display: flex; align-items: center; position: relative; }.celestial-nav .active { color: #fff; }.celestial-nav .active::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--lilac); box-shadow: 0 0 11px #b089ff; }.celestial-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; color: #c9d2f3; font-size: 11px; font-weight: 700; }.celestial-search { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #7384bd50; border-radius: 20px; color: #dfe7ff; background: #11182caa; cursor: pointer; }.celestial-search span { font-size: 17px; line-height: 10px; }.account-link:hover,.celestial-search:hover { color: #fff; border-color: #b6a2eb; }.celestial-menu { display: none; border: 0; color: #fff; background: transparent; font-size: 20px; }.celestial-search-panel { position: absolute; z-index: 5; top: 76px; right: max(24px,calc((100% - 1180px)/2 + 26px)); width: min(360px,calc(100% - 44px)); padding: 14px; background: #11192e; border: 1px solid #8f9fd050; border-radius: 0 0 10px 10px; box-shadow: 0 20px 40px #0009; }.celestial-search-panel label { display: block; margin-bottom: 8px; color: var(--lilac); font: 500 10px 'DM Mono',monospace; letter-spacing: .1em; text-transform: uppercase; }.celestial-search-panel div { display: flex; }.celestial-search-panel input { flex: 1; min-width: 0; padding: 10px; border: 1px solid #53638f; border-radius: 5px 0 0 5px; outline: 0; color: #fff; background: #080c18; font-size: 11px; }.celestial-search-panel button { width: 35px; border: 0; border-radius: 0 5px 5px 0; color: #fff; background: #4c4d82; cursor: pointer; }.home-v3 .celestial-search-panel[hidden],.home-v3 .celestial-mobile-nav[hidden] { display: none; }
.welcome-space { max-width: 1120px; min-height: 428px; margin: 0 auto; padding: 89px 26px 55px; display: flex; align-items: center; position: relative; }.welcome-copy { position: relative; z-index: 2; }.eyebrow-v3 { margin: 0 0 13px; color: #bba2e7; font: 500 10px 'DM Mono',monospace; letter-spacing: .14em; }.welcome-copy h1 { margin: 0; color: #f3f1fb; font: 600 clamp(45px,6vw,77px)/.94 Fraunces,Georgia,serif; letter-spacing: -.06em; }.welcome-copy h1 em { color: #b8c8ff; font-weight: 500; }.welcome-copy>p:not(.eyebrow-v3) { max-width: 370px; margin: 22px 0; color: #b5bed9; font-size: 14px; line-height: 1.7; }.welcome-links { display: flex; gap: 24px; align-items: center; font-size: 11px; font-weight: 800; }.welcome-links a:first-child { padding: 11px 14px; color: #111426; background: #d7ccfc; border-radius: 5px; }.welcome-links a:first-child span { margin-left: 15px; font-size: 15px; }.welcome-links a:last-child { color: #c8d4ff; }.constellation-art { position: absolute; right: 0; top: 27px; width: min(53vw,600px); height: 390px; opacity: .92; }.constellation-art::before { content: ''; position: absolute; inset: 52px 28px 23px; border-radius: 50%; background: radial-gradient(circle at 62% 38%,#bd9aff 0,rgba(137,107,230,.36) 17%,transparent 44%),radial-gradient(circle at 31% 68%,#6aa8ef 0,transparent 22%); filter: blur(3px); }.constellation-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg,var(--night) 0,transparent 38%); }.star-dot { position: absolute; z-index: 1; width: 7px; height: 7px; background: #fbf7ff; border-radius: 50%; box-shadow: 0 0 14px 4px #cbbcff; }.d1 { top: 66px; left: 35%; }.d2 { top: 120px; left: 56%; }.d3 { top: 208px; left: 45%; }.d4 { top: 256px; left: 73%; }.d5 { top: 145px; left: 84%; }.d6 { top: 310px; left: 26%; }.orbit { position: absolute; z-index: 1; border: 1px solid #c6b3f35e; border-radius: 50%; transform: rotate(-25deg); }.o1 { top: 62px; left: 26%; width: 293px; height: 170px; }.o2 { top: 103px; left: 39%; width: 305px; height: 200px; transform: rotate(32deg); }.moon { position: absolute; z-index: 2; top: 113px; left: 60%; width: 117px; height: 117px; border-radius: 50%; background: linear-gradient(145deg,#d7d2ff,#9a8bca 38%,#4b4779 39%,#202748); box-shadow: 0 0 60px #a795fa70; }.constellation-art b { position: absolute; z-index: 3; top: 147px; left: 71%; color: #fff; font-size: 33px; text-shadow: 0 0 16px #fff; }
.library-section,.shelf-section { max-width: 1120px; margin: 0 auto; padding: 50px 26px 0; }.library-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }.library-heading h2,.reading-card h2 { margin: 0; color: #f3f2fb; font: 600 29px/1 Fraunces,Georgia,serif; letter-spacing: -.04em; }.view-toggle { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; }.view-toggle button { width: 29px; height: 27px; border: 0; color: #8c98c0; background: #10162b; cursor: pointer; }.view-toggle button.selected { color: #fff; background: #4c4d82; }.constellation-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.constellation-card { min-height: 139px; position: relative; display: flex; flex-direction: column; justify-content: end; padding: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #13192d; transition: transform .2s,border-color .2s; }.constellation-card::before { content: ''; position: absolute; top: -42px; right: -18px; width: 145px; height: 145px; border: 1px solid #ccbdff47; border-radius: 50%; }.constellation-card::after { content: ''; position: absolute; top: 28px; right: 28px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 22px 18px #b5bffe,40px -13px #d9c3ff,66px 31px #90affd; }.constellation-card:hover { transform: translateY(-4px); border-color: #bbb3ea; }.constellation-card span { position: absolute; top: 17px; left: 17px; color: #d4c3ff; font-size: 21px; }.constellation-card strong { position: relative; z-index: 1; font: 600 19px Fraunces,Georgia,serif; }.constellation-card small { position: relative; z-index: 1; margin-top: 4px; color: #aab5d5; font-size: 10px; }.all-card { background: radial-gradient(circle at 85% 15%,#583d98 0,transparent 42%),#151a30; }.romance-card { background: radial-gradient(circle at 75% 5%,#87558c 0,transparent 45%),#16192d; }.fantasy-card { background: radial-gradient(circle at 85% 15%,#32677c 0,transparent 45%),#111a2b; }.scifi-card { background: radial-gradient(circle at 70% 10%,#4b56a0 0,transparent 44%),#12162c; }.shelf-section { padding-top: 72px; }.text-link { color: #bdcaff; font-size: 11px; font-weight: 800; }.text-link span { margin-left: 8px; }.celestial-shelf { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }.celestial-book { min-width: 0; }.book-sky { height: 223px; position: relative; overflow: hidden; border: 1px solid #92a3c14b; border-radius: 5px; box-shadow: 0 14px 18px #02040c66; }.book-sky::before { content: ''; position: absolute; inset: 0; opacity: .8; background-image: radial-gradient(#fff 1px,transparent 1.4px),radial-gradient(#d8c9ff 1px,transparent 1.4px); background-size: 27px 31px,41px 47px; background-position: 4px 7px,13px 18px; }.book-sky::after { content: ''; position: absolute; right: -20px; bottom: -41px; width: 138px; height: 138px; border-radius: 50%; background: #050714a6; }.book-sky span { position: absolute; z-index: 2; top: 9px; left: 9px; color: #f4f0ff; font: 9px 'DM Mono',monospace; }.book-sky i { position: absolute; z-index: 1; top: 42px; left: 30px; width: 85px; height: 85px; border: 7px solid #d2c5ff99; border-radius: 50%; box-shadow: 16px 34px 0 -5px #9ebafd66; }.book-sky b { position: absolute; z-index: 1; right: 21px; bottom: 24px; color: #fff; font-size: 26px; }.b1 .book-sky { background: linear-gradient(145deg,#403260,#1a294c 49%,#15192e); }.b2 .book-sky { background: linear-gradient(145deg,#755471,#282344 52%,#15172c); }.b3 .book-sky { background: linear-gradient(145deg,#36708a,#1a2949 52%,#10182d); }.b4 .book-sky { background: linear-gradient(145deg,#4d4fa4,#242359 52%,#11162e); }.b5 .book-sky { background: linear-gradient(145deg,#876564,#362239 52%,#16162a); }.b6 .book-sky { background: linear-gradient(145deg,#5c78a2,#25355d 52%,#121b30); }.book-lines { padding-top: 11px; }.book-lines i,.new-row i { display: block; height: 5px; margin-bottom: 6px; background: #b2bdd940; border-radius: 6px; }.book-lines i:first-child { width: 82%; }.book-lines i:nth-child(2) { width: 61%; }.book-lines i:last-child { width: 35%; background: #bca2f599; }
.reading-area { max-width: 1120px; margin: 0 auto; padding: 74px 26px 70px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 15px; }.reading-card { position: relative; display: flex; min-height: 244px; padding: 36px; overflow: hidden; border: 1px solid #a3b2e449; border-radius: 8px; background: radial-gradient(circle at 78% 45%,#57458f 0,transparent 23%),linear-gradient(115deg,#151d38,#111629); }.reading-card h2 { font-size: 35px; }.reading-text { max-width: 390px; color: #abb6d5; font-size: 12px; line-height: 1.65; }.reading-card a { display: inline-block; margin-top: 4px; color: #d6d0ff; font-size: 11px; font-weight: 800; }.reading-card a span { margin-left: 10px; }.reading-orbit { position: absolute; right: -13px; bottom: -63px; width: 285px; height: 285px; border: 1px solid #c3b9ff68; border-radius: 50%; }.reading-orbit i { position: absolute; border: 1px solid #9aaefb58; border-radius: 50%; }.reading-orbit i:first-child { inset: 29px; }.reading-orbit i:nth-child(2) { inset: 67px; }.reading-orbit span { position: absolute; top: 98px; left: 82px; color: #fff; font-size: 37px; text-shadow: 0 0 18px #bda9ff; }.new-panel { padding: 24px 21px; border: 1px solid var(--line); border-radius: 8px; background: #12182acc; }.new-row { display: grid; grid-template-columns: 35px 1fr 14px; align-items: center; gap: 10px; min-height: 56px; border-top: 1px solid #7889b52b; }.new-row:first-of-type { margin-top: 13px; }.tiny-book { width: 29px; height: 36px; border-radius: 2px; }.t1 { background: linear-gradient(145deg,#584071,#16233f); }.t2 { background: linear-gradient(145deg,#716184,#2e274c); }.t3 { background: linear-gradient(145deg,#3a6c86,#1b2948); }.new-row i:first-child { width: 82%; }.new-row i:nth-child(2) { width: 48%; background: #c5adfa8c; }.new-row b { color: #a9baff; font-size: 13px; }.celestial-footer { max-width: 1120px; margin: 0 auto; padding: 23px 26px 38px; display: flex; align-items: center; gap: 19px; color: #8490b4; border-top: 1px solid var(--line); font-size: 10px; }.celestial-footer span:last-child { margin-left: auto; }
@media (max-width: 760px) { .celestial-header { height: 60px; padding: 0 19px; }.celestial-nav,.celestial-actions { display: none; }.celestial-menu { display: block; margin-left: auto; }.home-v3 .mobile-nav { top: 60px; background: #121a30; border-color: #6d75a8; }.celestial-search-panel { top: 60px; right: 19px; }.welcome-space { min-height: 512px; align-items: start; padding: 66px 22px 250px; }.constellation-art { top: auto; right: 0; bottom: -49px; width: 100%; height: 280px; }.constellation-art::after { background: linear-gradient(180deg,var(--night) 0,transparent 32%); }.moon { top: 87px; left: 60%; }.o1 { top: 56px; left: 17%; }.o2 { top: 68px; left: 32%; }.d1 { top: 49px; left: 25%; }.d2 { top: 95px; left: 51%; }.d3 { top: 156px; left: 38%; }.d4 { top: 199px; left: 75%; }.d5 { top: 114px; left: 88%; }.d6 { top: 226px; left: 15%; }.constellation-art b { top: 115px; left: 72%; }.library-section,.shelf-section { padding-right: 19px; padding-left: 19px; }.constellation-grid { grid-template-columns: 1fr 1fr; }.celestial-shelf { display: flex; overflow-x: auto; padding-bottom: 7px; scrollbar-width: none; }.celestial-shelf::-webkit-scrollbar { display: none; }.celestial-book { flex: 0 0 142px; }.book-sky { height: 205px; }.reading-area { grid-template-columns: 1fr; padding: 58px 19px; }.new-panel { display: none; }.celestial-footer { margin: 0 19px; padding-right: 0; padding-left: 0; } }
@media (max-width: 420px) { .welcome-copy h1 { font-size: 49px; }.welcome-copy>p:not(.eyebrow-v3) { font-size: 12px; }.library-heading h2 { font-size: 26px; }.constellation-card { min-height: 124px; padding: 14px; }.constellation-card span { top: 14px; left: 14px; }.constellation-card strong { font-size: 17px; }.reading-card { padding: 27px; }.reading-card h2 { font-size: 31px; }.celestial-footer { flex-wrap: wrap; }.celestial-footer p { width: 100%; margin: 0; }.celestial-footer span:last-child { margin-left: 0; } }

/* Simple catalogue-first homepage */
.home-v4 { --ink: #0b0d17; --panel: #111523; --line: #ffffff16; --lilac: #c7b5ff; min-height: 100vh; color: #edf0fb; background: radial-gradient(circle at 84% -40%,#202b54 0,transparent 39rem),#0b0d17; font-family: Manrope,Arial,sans-serif; }.home-v4 a { color: inherit; text-decoration: none; }.simple-header { max-width: 1240px; height: 64px; margin: auto; padding: 0 27px; display: flex; align-items: center; gap: 38px; border-bottom: 1px solid var(--line); }.simple-brand { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .16em; }.simple-brand span { display: inline-grid; width: 23px; height: 23px; place-items: center; margin-right: 7px; color: #f2efff; background: #4b3a78; border-radius: 50%; font-size: 12px; }.simple-header nav { display: flex; height: 100%; gap: 25px; color: #aeb5ca; font-size: 11px; font-weight: 700; }.simple-header nav a { display: flex; align-items: center; position: relative; }.simple-header nav .active { color: #fff; }.simple-header nav .active::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--lilac); }.simple-actions { display: flex; align-items: center; gap: 19px; margin-left: auto; color: #c3c9dc; font-size: 11px; font-weight: 700; }.simple-actions button { padding: 8px 12px; border: 1px solid #ffffff1c; border-radius: 5px; color: #e8ebf6; background: #121728; cursor: pointer; }.simple-actions button:hover { border-color: #bda9f1; }.simple-menu { display: none; margin-left: auto; border: 0; color: #fff; background: transparent; font-size: 20px; }.home-v4 .mobile-nav { top: 64px; background: #13182a; }.simple-search { position: absolute; z-index: 5; top: 64px; right: max(27px,calc((100% - 1240px)/2 + 27px)); display: flex; width: min(330px,calc(100% - 40px)); padding: 9px; background: #14192b; border: 1px solid #7d82a44c; border-radius: 0 0 6px 6px; box-shadow: 0 14px 32px #0009; }.simple-search input { flex: 1; min-width: 0; padding: 9px; border: 1px solid #49526e; border-radius: 4px 0 0 4px; color: #fff; background: #0a0e1a; outline: 0; font-size: 11px; }.simple-search button { width: 34px; border: 0; border-radius: 0 4px 4px 0; color: #fff; background: #51477a; cursor: pointer; }.home-v4 .simple-search[hidden],.home-v4 .simple-mobile-nav[hidden] { display: none; }
.catalogue { max-width: 1240px; margin: 0 auto; padding: 35px 27px 30px; }.catalogue-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 23px; }.catalogue-head p,.simple-updates p { margin: 0 0 8px; color: #ab9ade; font: 500 10px 'DM Mono',monospace; letter-spacing: .13em; }.catalogue-head h1 { margin: 0; color: #f4f1fb; font: 600 33px/1 Fraunces,Georgia,serif; letter-spacing: -.04em; }.catalogue-tools { display: flex; gap: 7px; }.filter-button { padding: 8px 11px; border: 1px solid #9584c944; border-radius: 4px; color: #ded5ff; background: #28213e; cursor: pointer; font-size: 10px; font-weight: 800; }.filter-button.muted { color: #aeb6cc; background: #171b2b; border-color: var(--line); }.story-wall { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 21px 15px; }.simple-cover { position: relative; height: 253px; overflow: hidden; border: 1px solid #ffffff20; border-radius: 4px; box-shadow: 0 10px 16px #0005; transition: transform .18s,border-color .18s; }.simple-story:hover .simple-cover { transform: translateY(-4px); border-color: #bca6f2; }.simple-cover::before { content: ''; position: absolute; inset: 0; opacity: .58; background-image: radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#c4b8ff 1px,transparent 1.5px); background-size: 33px 39px,57px 63px; background-position: 0 0,15px 21px; }.simple-cover::after { content: ''; position: absolute; right: -38px; bottom: -50px; width: 165px; height: 165px; border-radius: 50%; background: #060814aa; box-shadow: -37px -44px 0 -29px #c8b4ff33; }.simple-cover span { position: absolute; z-index: 1; top: 10px; left: 10px; color: #fff; font: 9px 'DM Mono',monospace; }.simple-cover b { position: absolute; z-index: 1; right: 18px; bottom: 20px; color: #fff; text-shadow: 0 0 14px #fff; font-size: 26px; }.s1 .simple-cover { background: linear-gradient(145deg,#695298,#1e294a 53%,#151a2e); }.s2 .simple-cover { background: linear-gradient(145deg,#875e83,#2d2445 54%,#17172b); }.s3 .simple-cover { background: linear-gradient(145deg,#3b7d99,#192b4c 54%,#121b30); }.s4 .simple-cover { background: linear-gradient(145deg,#6065ad,#292350 54%,#13172d); }.s5 .simple-cover { background: linear-gradient(145deg,#a27665,#40263c 54%,#1b1829); }.s6 .simple-cover { background: linear-gradient(145deg,#4c7694,#1c3953 54%,#111c2d); }.s7 .simple-cover { background: linear-gradient(145deg,#8b6998,#36294e 54%,#19162b); }.s8 .simple-cover { background: linear-gradient(145deg,#4e8b7d,#1c3a3b 54%,#121e27); }.s9 .simple-cover { background: linear-gradient(145deg,#8b5b71,#35223c 54%,#1a1527); }.s10 .simple-cover { background: linear-gradient(145deg,#6883aa,#263551 54%,#121a2e); }.simple-story-copy { padding-top: 10px; }.simple-story-copy i { display: block; height: 6px; margin-bottom: 6px; border-radius: 3px; background: #bac3dd3d; }.simple-story-copy i:first-child { width: 78%; }.simple-story-copy i:nth-child(2) { width: 52%; }.simple-story-copy small { color: #d2ae55; font-size: 8px; letter-spacing: 2px; }.simple-updates { max-width: 1240px; margin: 0 auto; padding: 8px 27px 54px; }.simple-updates header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }.simple-updates header a { color: #c9cfff; font-size: 10px; font-weight: 800; }.simple-updates>div { display: grid; grid-template-columns: repeat(5,1fr); gap: 11px; }.simple-updates>div>span { height: 7px; border-radius: 5px; background: linear-gradient(90deg,#7961a8,#405d99); opacity: .7; }.simple-footer { max-width: 1186px; margin: auto; padding: 19px 0 32px; color: #c4b5ef; border-top: 1px solid var(--line); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.simple-footer span { margin-left: 14px; color: #707a9a; font-weight: 500; letter-spacing: 0; }
@media (max-width: 850px) { .story-wall { grid-template-columns: repeat(4,minmax(0,1fr)); }.simple-cover { height: 235px; } }
@media (max-width: 640px) { .simple-header { height: 56px; padding: 0 18px; }.simple-header nav,.simple-actions { display: none; }.simple-menu { display: block; }.home-v4 .mobile-nav { top: 56px; }.simple-search { top: 56px; right: 18px; }.catalogue { padding: 29px 18px; }.catalogue-head h1 { font-size: 29px; }.story-wall { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 11px; }.simple-cover { height: calc((100vw - 58px) * 1.44); max-height: 240px; }.simple-updates { padding: 6px 18px 40px; }.simple-updates>div { grid-template-columns: repeat(3,1fr); }.simple-updates>div>span:nth-child(n+4) { display: none; }.simple-footer { margin: 0 18px; }.simple-footer span { display: block; margin: 7px 0 0; } }

/* Trending, popular, and updates homepage */
.home-v5 { --ink: #0b0d17; --panel: #151826; --line: #ffffff13; --lilac: #c7b5ff; min-height: 100vh; color: #eff1fb; background: radial-gradient(circle at 94% -40%,#1c284d 0,transparent 36rem),#0b0d17; font-family: Manrope,Arial,sans-serif; }.home-v5 a { color: inherit; text-decoration: none; }.home-v5 .simple-header { border-color: var(--line); }.home-v5 .simple-search[hidden],.home-v5 .simple-mobile-nav[hidden] { display: none; }.sections-home { max-width: 1240px; display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 15px; margin: 0 auto; padding: 27px; }.sections-feed { display: grid; gap: 15px; }.section-box,.updates-box,.popular-list { border: 1px solid var(--line); border-radius: 6px; background: #151826d9; }.section-box { padding: 0 14px 14px; }.section-box-heading { height: 44px; display: flex; align-items: center; justify-content: space-between; }.section-box-heading>div { display: flex; align-items: center; gap: 8px; }.section-symbol { display: grid; place-items: center; width: 19px; height: 19px; color: #e2d9ff; background: #4a3376; border-radius: 4px; font-size: 10px; }.gold-symbol { color: #ffe1a2; background: #75562a; }.section-box-heading h1,.section-box-heading h2 { margin: 0; color: #f3f3fb; font-size: 13px; }.section-box-heading>a { padding: 6px 9px; color: #e6ddff; background: #3e2b66; border-radius: 4px; font-size: 9px; font-weight: 800; }.section-box-heading>a span { margin-left: 5px; }.section-box-heading .gold-action { color: #211a10; background: #d9af51; }.section-shelf { display: grid; grid-template-columns: repeat(5,1fr); gap: 11px; }.compact-story { min-width: 0; }.compact-story>div { position: relative; height: 170px; overflow: hidden; border: 1px solid #ffffff20; border-radius: 3px; }.compact-story>div::before { content: ''; position: absolute; inset: 0; opacity: .62; background-image: radial-gradient(#fff 1px,transparent 1.4px),radial-gradient(#c8c0ff 1px,transparent 1.4px); background-size: 27px 29px,43px 47px; background-position: 0 0,13px 17px; }.compact-story>div::after { content: ''; position: absolute; right: -24px; bottom: -45px; width: 125px; height: 125px; border-radius: 50%; background: #060715b5; }.compact-story>div span { position: absolute; z-index: 1; top: 7px; left: 7px; color: #fff; font: 8px 'DM Mono',monospace; }.compact-story>div b { position: absolute; z-index: 1; right: 14px; bottom: 13px; color: #fff; text-shadow: 0 0 13px #fff; font-size: 21px; }.cs1>div,.cs6>div { background: linear-gradient(145deg,#664a91,#1f294c 55%,#12172b); }.cs2>div,.cs7>div { background: linear-gradient(145deg,#755a80,#2d2444 55%,#17172a); }.cs3>div,.cs8>div { background: linear-gradient(145deg,#3a7891,#162a49 55%,#111c2c); }.cs4>div,.cs9>div { background: linear-gradient(145deg,#575fa9,#292452 55%,#12162d); }.cs5>div,.cs10>div { background: linear-gradient(145deg,#9d7164,#41263d 55%,#1b1729); }.compact-story footer { padding-top: 8px; }.compact-story footer i,.update-item i,.popular-list li i { display: block; height: 5px; margin-bottom: 5px; border-radius: 5px; background: #b7bfd53b; }.compact-story footer i:first-child { width: 82%; }.compact-story footer i:nth-child(2) { width: 59%; }.compact-story footer small,.popular-list small { color: #d5ae4c; font-size: 7px; letter-spacing: 1px; }.second-box { background: #171824d9; }.updates-box { padding: 0 14px 7px; }.update-columns { display: grid; grid-template-columns: 1fr 1fr; }.update-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; min-height: 64px; padding: 10px 0; border-top: 1px solid #ffffff12; }.update-item:nth-child(odd) { padding-right: 12px; border-right: 1px solid #ffffff12; }.update-item:nth-child(even) { padding-left: 12px; }.update-cover { display: block; width: 38px; height: 44px; border-radius: 2px; }.uc1 { background: linear-gradient(145deg,#694a92,#1d294c); }.uc2 { background: linear-gradient(145deg,#8b5e7d,#392640); }.uc3 { background: linear-gradient(145deg,#398099,#173250); }.uc4 { background: linear-gradient(145deg,#6064a5,#2d2850); }.update-item div { min-width: 0; }.update-item i:first-child { width: 86%; }.update-item i:nth-child(2) { width: 63%; }.update-item i:nth-child(3) { width: 41%; background: #c8a0ff77; }.update-item small { color: #8993ad; font: 8px 'DM Mono',monospace; }
.popular-list { padding: 0 13px 8px; }.popular-list header { height: 44px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff12; }.popular-list h2 { margin: 0; font-size: 13px; }.popular-list header div { display: flex; gap: 3px; }.popular-list button { padding: 4px 4px; border: 0; border-radius: 3px; color: #aab2ca; background: transparent; cursor: pointer; font-size: 7px; font-weight: 800; }.popular-list button.active { color: #f5f2ff; background: #5b3d90; }.popular-list ol { padding: 5px 0 0; margin: 0; list-style: none; }.popular-list li { display: grid; grid-template-columns: 15px 30px 1fr; align-items: center; gap: 8px; min-height: 49px; }.popular-list li>b { display: grid; place-items: center; width: 14px; height: 14px; color: #fff; background: #6040a0; border-radius: 50%; font-size: 8px; }.rank-cover { display: block; width: 27px; height: 35px; overflow: hidden; border-radius: 2px; }.r1,.r6 { background: linear-gradient(145deg,#704b99,#1d294c); }.r2,.r7 { background: linear-gradient(145deg,#396e87,#19314c); }.r3,.r8 { background: linear-gradient(145deg,#936177,#382540); }.r4 { background: linear-gradient(145deg,#5a5ca1,#282750); }.r5 { background: linear-gradient(145deg,#967055,#482a3b); }.popular-list li i:first-child { width: 90%; }.popular-list li i:nth-child(2) { width: 62%; height: 4px; }.popular-list li small { display: block; margin-top: -2px; }
@media (max-width: 800px) { .sections-home { grid-template-columns: 1fr; padding: 15px; }.popular-list { display: none; }.section-shelf { overflow-x: auto; grid-template-columns: repeat(5,137px); padding-bottom: 3px; scrollbar-width: none; }.section-shelf::-webkit-scrollbar { display: none; }.compact-story>div { height: 184px; } }

/* Real library and writer tools */
.library-page { min-height: calc(100vh - 140px); }.library-hero { max-width: 1180px; margin: 0 auto; padding: 72px 32px 48px; background: radial-gradient(circle at 78% 24%,#5a448f55,transparent 23rem); }.library-hero>div { max-width: 620px; }.eyebrow { color: #b9a2ea; font: 700 10px 'DM Mono',monospace; letter-spacing: .14em; }.library-hero h1,.writer-sidebar h1 { margin: 10px 0 18px; color: #f6f3ff; font: 600 clamp(40px,5vw,62px)/1 Fraunces,Georgia,serif; letter-spacing: -.05em; }.library-hero p:not(.eyebrow),.writer-sidebar>p:not(.eyebrow) { max-width: 560px; color: #b9b6c6; line-height: 1.7; }.library-section { max-width: 1180px; margin: 0 auto; padding: 18px 32px 70px; }.library-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom: 22px; }.library-heading p { margin:0 0 7px; }.library-heading h2 { margin:0; color:#f7f5ff; font:600 31px Fraunces,Georgia,serif; letter-spacing:-.04em; }.library-heading>a { color:#d7c1ff; font-weight:800; font-size:12px; }.real-story-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px 16px; }.real-story-card { min-width:0; position:relative; }.real-story-card>a:first-child { display:block; color:inherit; text-decoration:none; }.story-cover { position:relative; height:258px; overflow:hidden; border:1px solid #ffffff22; border-radius:5px; background:#27213d; box-shadow:0 11px 18px #0005; transition:transform .18s,border-color .18s; }.real-story-card>a:first-child:hover .story-cover { transform:translateY(-4px); border-color:#c9b4f5; }.image-cover img,.work-cover img,.cover-upload-preview img { width:100%; height:100%; display:block; object-fit:cover; }.generated-cover { display:flex; flex-direction:column; justify-content:end; gap:12px; padding:18px; isolation:isolate; background:radial-gradient(circle at 75% 18%,#d0a7ff88,transparent 13%),linear-gradient(145deg,#60498a,#1c294a 55%,#111525); }.generated-cover:after { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(#fff 1px,transparent 1.5px); background-size:34px 38px; opacity:.28; }.generated-cover span { align-self:end; margin-bottom:auto; font-size:27px; }.generated-cover strong { max-height:92px; overflow:hidden; color:#fff; font:600 27px/.9 Fraunces,Georgia,serif; letter-spacing:-.06em; }.real-story-copy { padding:11px 2px 0; }.real-story-copy p { margin:0 0 5px; color:#bca5ec; font:700 9px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }.real-story-copy h3 { overflow:hidden; margin:0 0 5px; color:#f3effc; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.real-story-copy span { display:block; overflow:hidden; color:#a7a5b0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.real-story-copy small { display:block; overflow:hidden; margin-top:6px; color:#d6b255; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.edit-story-link { display:inline-block; margin-top:10px; color:#d8c5ff; font-size:10px; font-weight:800; }.empty-library,.not-found { grid-column:1/-1; padding:56px 24px; border:1px dashed #8a73b451; border-radius:8px; text-align:center; background:#15182699; }.empty-library>span { color:#d5b0ff; font-size:28px; }.empty-library h3,.not-found h1 { margin:11px 0 8px; color:#f1edf9; font:600 27px Fraunces,Georgia,serif; }.empty-library p,.no-results { max-width:440px; margin:0 auto 20px; color:#a7a6b0; line-height:1.6; }.loading-copy,.no-results { color:#aaa7b8; }.nav-write { color:#f1e7ff!important; background:#5f3d90; border-radius:4px; padding:8px 11px!important; }
.writer-layout { max-width:1200px; display:grid; grid-template-columns:300px minmax(0,1fr); gap:46px; margin:0 auto; padding:47px 32px 80px; }.writer-sidebar { position:sticky; top:25px; align-self:start; }.writer-sidebar h1 { font-size:38px; }.cover-upload-preview { display:grid; place-items:center; height:360px; overflow:hidden; margin-top:27px; color:#dfd3f8; border:1px solid #ffffff25; border-radius:6px; background:linear-gradient(145deg,#624887,#202943 56%,#121729); box-shadow:0 10px 20px #0006; }.cover-upload-preview span { margin-bottom:-130px; font-size:31px; }.cover-upload-preview small { margin-top:-120px; font:700 10px 'DM Mono',monospace; letter-spacing:.1em; }.cover-upload { display:block; margin-top:13px; padding:10px 12px; color:#ede7ff; background:#3b2d5a; border-radius:4px; cursor:pointer; font-size:11px; font-weight:800; text-align:center; }.cover-upload input { display:none; }.text-button,.danger-button { padding:0; color:#d1b9ff; background:none; border:0; cursor:pointer; font:800 10px inherit; }.text-button { margin-top:11px; }.story-editor { min-width:0; }.editor-section { padding:24px; margin-bottom:16px; background:#171a28; border:1px solid #ffffff13; border-radius:7px; }.editor-section h2 { margin:0 0 18px; color:#f4f1fb; font:600 25px Fraunces,Georgia,serif; }.editor-section label { display:block; margin-top:15px; color:#d7d1e4; font-size:11px; font-weight:800; }.editor-section label small { color:#9f9aaa; font-weight:500; }.editor-section input,.editor-section textarea,.editor-section select { box-sizing:border-box; width:100%; margin-top:7px; padding:11px 12px; color:#f0ecf6; border:1px solid #ffffff19; border-radius:4px; outline:none; background:#0e101b; font:400 13px Manrope,Arial,sans-serif; resize:vertical; }.editor-section input:focus,.editor-section textarea:focus,.editor-section select:focus { border-color:#af8ee9; box-shadow:0 0 0 3px #a783e21f; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.section-title-row { display:flex; justify-content:space-between; gap:15px; align-items:start; }.section-title-row h2 { margin-bottom:5px; }.section-title-row p { margin:0; color:#a8a5b1; font-size:11px; line-height:1.5; }.secondary-editor-button { flex:none; padding:9px 11px; color:#e6dcfa; border:1px solid #b89ce34b; border-radius:4px; background:#2d2446; cursor:pointer; font-size:10px; font-weight:800; }.chapter-editor { padding:17px 0 0; margin-top:18px; border-top:1px solid #ffffff17; }.chapter-editor header { display:flex; justify-content:space-between; color:#e8e1f6; font-size:12px; }.remove-chapter { color:#e6a6b8; border:0; background:none; cursor:pointer; font-size:10px; font-weight:800; }.editor-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }.editor-actions button { border:0; cursor:pointer; }.editor-actions .danger-button { margin-left:auto; color:#efadb9; }.form-message { padding:11px 13px; margin-bottom:14px; color:#e7dfff; border:1px solid #9d7bca4d; border-radius:5px; background:#3e315833; font-size:12px; }.unavailable-label { color:#b6a2d9; font-size:12px; }.not-found { max-width:680px; margin:68px auto; }
@media (max-width:900px) { .real-story-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.writer-layout { grid-template-columns:1fr; gap:22px; }.writer-sidebar { position:static; }.cover-upload-preview { width:180px; height:250px; }.writer-sidebar>p { max-width:580px; } }
@media (max-width:640px) { .library-hero,.library-section,.writer-layout { padding-right:18px; padding-left:18px; }.library-hero { padding-top:47px; }.real-story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 12px; }.story-cover { height:calc((100vw - 48px) * 1.44); max-height:255px; }.library-heading h2 { font-size:26px; }.field-row { grid-template-columns:1fr; gap:0; }.section-title-row { display:block; }.secondary-editor-button { margin-top:15px; }.editor-section { padding:18px; }.editor-actions .danger-button { width:100%; margin:8px 0 0; text-align:left; }.simple-actions .nav-write { display:none; } }

/* Fablenest: restrained black and deep-purple palette */
body.home-v5,body.publish-page,body.dynamic-work-page,body.reader-page { color:#eeeaf2; background:#0d0b10; }.home-v5 { --ink:#0d0b10; --panel:#17121d; --line:#ffffff14; --lilac:#bea4d6; background:#0d0b10; }.simple-header,.reader-header { background:#0d0b10; border-color:#2d2338; }.library-hero { background:#100c14; border-bottom:1px solid #281e31; }.library-hero h1,.writer-sidebar h1,.library-heading h2,.editor-section h2 { color:#f4eff7; }.library-hero p:not(.eyebrow),.writer-sidebar>p:not(.eyebrow),.section-title-row p { color:#aaa2b1; }.eyebrow,.real-story-copy p { color:#ba9bd0; }.editor-section,.empty-library,.not-found { background:#16121b; border-color:#30243b; }.editor-section input,.editor-section textarea,.editor-section select { color:#f1ecf4; background:#0d0b10; border-color:#34263f; }.editor-section input:focus,.editor-section textarea:focus,.editor-section select:focus { border-color:#9a78b5; box-shadow:0 0 0 3px #9a78b51f; }.cover-upload-preview,.generated-cover { background:#1a1321; }.generated-cover:after { display:none; }.story-cover { background:#1a1321; border-color:#35273f; }.nav-write,.start-work { background:#68477e!important; }.save-work,.secondary-editor-button { background:#261b30!important; border-color:#604373!important; }.cover-upload { background:#2b2035; }.form-message { color:#eee6f2; border-color:#604373; background:#241a2c; }.simple-footer { border-color:#2d2338; }

/* Compact catalogue cards */
.real-story-grid { grid-template-columns:repeat(auto-fill,minmax(150px,180px)); gap:25px 18px; }.story-cover { height:230px; }@media (max-width:900px) { .real-story-grid { grid-template-columns:repeat(auto-fill,minmax(150px,180px)); } }@media (max-width:640px) { .real-story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 12px; }.story-cover { height:205px; } }

/* Fablenest home landing */
.home-landing { min-height:430px; display:flex; align-items:center; justify-content:space-between; gap:40px; max-width:1180px; margin:0 auto; padding:72px 32px; border-bottom:1px solid #281e31; }.landing-copy { max-width:610px; }.landing-copy h1 { max-width:580px; margin:11px 0 18px; color:#f4eff7; font:600 clamp(42px,5.2vw,69px)/.98 Fraunces,Georgia,serif; letter-spacing:-.055em; }.landing-copy p:not(.eyebrow) { max-width:480px; color:#aaa2b1; font-size:16px; line-height:1.7; }.landing-action { display:inline-flex; align-items:center; gap:13px; margin-top:14px; padding:12px 15px; color:#efe8f4; border:1px solid #65487b; border-radius:4px; background:#241a2c; font-size:12px; font-weight:800; text-decoration:none; }.landing-action:hover { background:#30223b; }.landing-mark { flex:none; display:grid; place-items:center; width:190px; height:190px; color:#c4a5d8; border:1px solid #4b365a; border-radius:50%; background:#17111d; font-size:59px; box-shadow:0 0 0 18px #130f17; }@media (max-width:640px) { .home-landing { min-height:390px; padding:52px 18px; }.landing-mark { display:none; }.landing-copy h1 { font-size:44px; } }

/* Fablenest discovery dashboard */
.fanfic-home { min-height:100vh; color:#f4f0f6; background:#100d13; font-family:Manrope,Arial,sans-serif; }.fanfic-home .simple-header { background:#100d13; border-color:#2a2031; }.fanfic-home .simple-brand span { color:#bd8cdd; font-size:16px; }.fanfic-dashboard { max-width:1260px; display:grid; grid-template-columns:minmax(0,1fr) 345px; gap:14px; margin:0 auto; padding:18px 14px 38px; }.dashboard-feed { display:grid; gap:14px; min-width:0; }.fanfic-panel,.fanfic-popular { overflow:hidden; border:1px solid #2b2331; border-radius:5px; background:#1b1720; }.fanfic-panel-heading { display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:0 18px; border-bottom:1px solid #2b2331; }.fanfic-panel-heading>div { display:flex; align-items:center; gap:9px; }.fanfic-panel-heading h1,.fanfic-panel-heading h2,.fanfic-popular h2 { margin:0; color:#faf7fb; font-size:16px; }.panel-badge { display:grid; place-items:center; width:23px; height:23px; color:#efdfff; border-radius:5px; background:#562c77; font-size:12px; }.panel-badge.gold { color:#24180b; background:#f2b52c; }.fanfic-panel-heading>a { padding:7px 10px; color:#f4eaff; border-radius:4px; background:#7435aa; font-size:10px; font-weight:800; text-decoration:none; }.fanfic-card-row { display:flex; gap:12px; min-height:235px; overflow-x:auto; padding:14px 18px 16px; scrollbar-width:thin; scrollbar-color:#583e65 transparent; }.fanfic-card { flex:0 0 128px; min-width:0; }.fanfic-card a { display:block; color:inherit; text-decoration:none; }.fanfic-cover { position:relative; height:169px; overflow:hidden; border:1px solid #ffffff1a; border-radius:4px; background:#251c2c; box-shadow:0 5px 11px #0005; }.fanfic-cover img { width:100%; height:100%; object-fit:cover; }.fanfic-cover.generated-cover { padding:10px; }.fanfic-cover.generated-cover strong { max-height:60px; font-size:17px; }.fanfic-cover.generated-cover span { font-size:17px; }.fanfic-card h3 { overflow:hidden; margin:8px 0 2px; color:#f5f1f7; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.fanfic-card small { display:block; color:#aaa3ad; font-size:10px; }.fanfic-card p { overflow:hidden; margin:5px 0 0; color:#ffce3d; font-size:9px; white-space:nowrap; }.fanfic-card p span { margin-left:5px; color:#93899b; }.dashboard-empty { align-self:center; margin:auto; color:#aaa2ae; font-size:12px; }.updates-panel-real { min-height:180px; }.real-updates { display:grid; grid-template-columns:1fr 1fr; }.update-real-item { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:74px; padding:12px 15px; color:inherit; border-top:1px solid #2b2331; text-decoration:none; }.update-real-item:nth-child(odd) { border-right:1px solid #2b2331; }.update-real-cover { width:48px; height:54px; overflow:hidden; border-radius:3px; background:#2b2133; }.update-real-cover img { width:100%; height:100%; object-fit:cover; }.update-real-cover.generated-cover { display:grid; place-items:center; padding:0; }.update-real-cover.generated-cover strong { display:none; }.update-real-cover.generated-cover span { margin:0; font-size:16px; }.update-real-item strong,.update-real-item span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.update-real-item strong { color:#f5f2f7; font-size:11px; }.update-real-item span { margin-top:4px; color:#bba2d4; font-size:10px; }.update-real-item time { color:#e8ba35; font-size:9px; }.fanfic-popular { padding-bottom:4px; }.fanfic-popular>header { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 14px; border-bottom:1px solid #2b2331; }.popular-tabs { display:flex; gap:2px; padding:3px; border-radius:5px; background:#120f15; }.popular-tabs button { padding:5px 7px; color:#a99ead; border:0; border-radius:4px; background:transparent; cursor:pointer; font-size:9px; font-weight:800; }.popular-tabs button.active { color:#fff; background:#783bb1; }.fanfic-popular ol { display:grid; gap:0; padding:6px 12px; margin:0; list-style:none; }.fanfic-popular li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:7px; align-items:center; padding:8px 0; }.fanfic-popular li>b { display:grid; place-items:center; width:18px; height:18px; color:#fff; border-radius:50%; background:#6d37a0; font-size:9px; }.fanfic-popular li>a { display:grid; grid-template-columns:38px minmax(0,1fr); gap:9px; align-items:center; min-width:0; color:inherit; text-decoration:none; }.popular-real-cover { width:38px; height:47px; overflow:hidden; border-radius:3px; background:#292033; }.popular-real-cover img { width:100%; height:100%; object-fit:cover; }.popular-real-cover.generated-cover { display:grid; place-items:center; padding:0; }.popular-real-cover.generated-cover strong { display:none; }.popular-real-cover.generated-cover span { margin:0; font-size:14px; }.fanfic-popular li span { min-width:0; }.fanfic-popular li strong,.fanfic-popular li small,.fanfic-popular li em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.fanfic-popular li strong { color:#f4f0f6; font-size:11px; }.fanfic-popular li small { margin-top:3px; color:#b8a8c6; font-size:9px; }.fanfic-popular li em { margin-top:4px; color:#facb37; font-size:9px; font-style:normal; }.fanfic-home .simple-footer { max-width:1232px; margin:auto; border-color:#2a2031; }@media (max-width:850px) { .fanfic-dashboard { grid-template-columns:1fr; }.fanfic-popular { display:none; } }.fanfic-home .simple-menu { color:#fff; }@media (max-width:640px) { .fanfic-dashboard { padding:10px 9px 28px; }.fanfic-card-row { min-height:229px; padding:12px; }.fanfic-panel-heading { padding:0 12px; }.real-updates { grid-template-columns:1fr; }.update-real-item:nth-child(odd) { border-right:0; }.fanfic-card { flex-basis:122px; }.fanfic-cover { height:162px; } }

/* Search behaviour and depth pass */
.simple-search[hidden],.simple-mobile-nav[hidden] { display:none!important; }.fanfic-home { background:radial-gradient(circle at 88% -12%,#35203f 0,transparent 29rem),#100d13; }.fanfic-home .simple-header { background:linear-gradient(180deg,#120e16,#0e0c11); box-shadow:0 1px 0 #ffffff08,0 8px 25px #0004; }.fanfic-panel,.fanfic-popular { background:linear-gradient(145deg,#211b26,#18141d 70%); box-shadow:0 12px 28px #0004,inset 0 1px 0 #ffffff06; }.fanfic-panel-heading,.fanfic-popular>header { background:#211a27aa; }.fanfic-card-row { min-height:208px; background:linear-gradient(90deg,#160f1c44,transparent 28%); }.fanfic-card { flex-basis:102px; }.fanfic-cover { height:137px; border-color:#ffffff24; box-shadow:0 7px 14px #0008,inset 0 0 0 1px #ffffff08; transition:transform .18s ease,box-shadow .18s ease; }.fanfic-card a:hover .fanfic-cover { transform:translateY(-3px); box-shadow:0 12px 20px #000b,0 0 0 1px #9166a8; }.fanfic-card h3 { font-size:10px; }.fanfic-card small { font-size:9px; }.fanfic-card p { font-size:8px; }.fanfic-cover.generated-cover strong { font-size:14px; }.fanfic-cover.generated-cover span { font-size:14px; }.fanfic-home .fanfic-panel:nth-child(2) .fanfic-panel-heading>a { background:#d89a22; color:#21170a; }.update-real-item:hover,.fanfic-popular li>a:hover { background:#ffffff06; }.fanfic-home .simple-actions button { border-color:#4a3759; background:#171220; }@media (max-width:640px) { .fanfic-card-row { min-height:199px; }.fanfic-card { flex-basis:96px; }.fanfic-cover { height:129px; } }
@media (max-width: 640px) { .home-v5 .mobile-nav { top: 56px; }.sections-home { padding: 12px 9px 25px; }.section-box,.updates-box { padding-right: 10px; padding-left: 10px; }.section-box-heading { height: 42px; }.section-box-heading>a { padding: 5px 7px; }.update-columns { grid-template-columns: 1fr; }.update-item:nth-child(odd),.update-item:nth-child(even) { padding-right: 0; padding-left: 0; border-right: 0; }.updates-box { padding-bottom: 5px; } }

/* Story detail page */
.work-page { --ink: #0b0d17; --panel: #151826; --line: #ffffff14; --lilac: #c7b5ff; min-height: 100vh; color: #ecf0fb; background: radial-gradient(circle at 85% 0,#202852 0,transparent 38rem),#0b0d17; font-family: Manrope,Arial,sans-serif; }.work-page a { color: inherit; text-decoration: none; }.work-page .simple-header { border-color: var(--line); }.work-page .simple-mobile-nav { top: 64px; }.work-page .simple-search[hidden],.work-page .simple-mobile-nav[hidden] { display: none; }.work-layout { max-width: 1090px; display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 38px; margin: 0 auto; padding: 40px 26px 64px; }.work-sidebar { align-self: start; }.work-cover { height: 356px; position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: 25px; border: 1px solid #afa4dd71; border-radius: 6px; background: radial-gradient(circle at 70% 19%,#d5b4ff 0,transparent 7%),radial-gradient(circle at 39% 36%,#6153a9 0,transparent 30%),linear-gradient(155deg,#1d315b,#34255b 56%,#111527); box-shadow: 0 18px 28px #0008; }.work-cover::before { content: ''; position: absolute; inset: 0; opacity: .72; background-image: radial-gradient(#fff 1px,transparent 1.4px),radial-gradient(#decfff 1px,transparent 1.4px); background-size: 33px 37px,49px 57px; background-position: 3px 7px,17px 23px; }.work-cover::after { content: ''; position: absolute; right: -36px; top: 30px; width: 190px; height: 260px; border: 13px solid #bba7ec; border-radius: 100px 100px 18px 18px; transform: rotate(18deg); box-shadow: inset 0 0 0 6px #251d4a; }.work-cover span { position: absolute; z-index: 1; top: 24px; left: 24px; color: #fff; font-size: 26px; text-shadow: 0 0 18px #fff; }.work-cover b { position: relative; z-index: 2; color: #f5efff; font: 600 31px/.82 Fraunces,Georgia,serif; letter-spacing: -.08em; }.work-cover b em { color: #d7c1ff; font-weight: 500; }.work-cover i { position: absolute; z-index: 2; right: 18px; bottom: 17px; color: #d7c9ff; font: 9px 'DM Mono',monospace; }.work-stats { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 11px; border: 1px solid var(--line); border-radius: 5px; background: #151826a8; }.work-stats div { min-width: 0; padding: 10px 4px; text-align: center; border-right: 1px solid var(--line); }.work-stats div:last-child { border-right: 0; }.work-stats b { display: block; color: #d2bcff; font-size: 12px; }.work-stats span { display: block; margin-top: 4px; color: #9da7c4; font-size: 8px; }.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.work-tags span { padding: 5px 7px; color: #bec9e7; border: 1px solid #ffffff16; border-radius: 3px; background: #16192a; font-size: 8px; }.work-main { min-width: 0; }.back-link { display: inline-block; margin-bottom: 27px; color: #aeb9dd; font-size: 10px; font-weight: 700; }.back-link:hover { color: #e2d7ff; }.work-eyebrow { margin: 0 0 10px; color: #b79cde; font: 500 10px 'DM Mono',monospace; letter-spacing: .12em; }.work-main>h1 { margin: 0; color: #f6f4fb; font: 600 clamp(36px,5vw,54px)/1 Fraunces,Georgia,serif; letter-spacing: -.05em; }.work-byline { margin: 12px 0 0; color: #9ea9c6; font-size: 12px; }.work-byline a { color: #d5c5ff; font-weight: 700; }.work-divider { display: flex; align-items: center; gap: 10px; margin: 28px 0; color: #b99dff; }.work-divider::before,.work-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }.work-main>h2 { margin: 0 0 9px; color: #eaeafa; font: 600 23px Fraunces,Georgia,serif; }.synopsis { max-width: 720px; margin: 0; color: #b8c1d9; font: 13px/1.8 Fraunces,Georgia,serif; }.work-actions { display: flex; gap: 10px; margin: 25px 0 39px; }.start-work,.save-work { padding: 11px 15px; border-radius: 5px; font-size: 10px; font-weight: 800; }.start-work { color: #151323; background: #d4c7ff; }.start-work span { margin-left: 18px; font-size: 15px; }.save-work { border: 1px solid #a99ad952; color: #d7d5e5; background: #151827; cursor: pointer; }.chapters-section { border: 1px solid var(--line); border-radius: 7px; background: #141826d9; }.chapters-section header { display: flex; align-items: end; justify-content: space-between; padding: 20px 21px 17px; }.chapters-section header h2 { margin: 0; color: #f0eff9; font: 600 26px Fraunces,Georgia,serif; }.chapters-section header span { color: #9fa8c0; font-size: 9px; }.chapter-search { display: flex; align-items: center; gap: 7px; margin: 0 21px; padding: 0 10px; border: 1px solid #5b638144; border-radius: 4px; color: #8996ba; background: #0e1220; }.chapter-search input { width: 100%; padding: 10px 0; border: 0; outline: 0; color: #eff1fa; background: transparent; font-size: 10px; }.chapter-list { margin: 16px 0 0; padding: 0; list-style: none; }.chapter-list li { border-top: 1px solid var(--line); }.chapter-list a { display: grid; grid-template-columns: 33px 1fr auto 15px; align-items: center; gap: 11px; min-height: 65px; padding: 0 21px; transition: background .16s; }.chapter-list a:hover { background: #ffffff08; }.chapter-index { display: grid; place-items: center; width: 25px; height: 25px; color: #d7c5ff; border: 1px solid #8b76bf62; border-radius: 50%; font: 9px 'DM Mono',monospace; }.chapter-list strong { display: block; color: #eaebf6; font-size: 11px; }.chapter-list small { display: block; margin-top: 3px; color: #8f9ab8; font-size: 9px; }.chapter-list time { color: #8993ad; font: 9px 'DM Mono',monospace; }.chapter-list b { color: #c2b0ed; font-size: 13px; }.work-page .simple-footer { max-width: 1038px; border-color: var(--line); }
@media (max-width: 700px) { .work-layout { grid-template-columns: 1fr; gap: 25px; padding: 24px 19px 47px; }.work-sidebar { display: grid; grid-template-columns: 128px 1fr; gap: 0 13px; }.work-cover { grid-row: span 2; height: 187px; padding: 13px; }.work-cover::after { right: -25px; top: 17px; width: 95px; height: 139px; border-width: 7px; }.work-cover span { top: 12px; left: 12px; font-size: 16px; }.work-cover b { font-size: 18px; }.work-cover i { right: 8px; bottom: 8px; }.work-stats { margin-top: 0; }.work-stats div { padding: 10px 2px; }.work-tags { align-content: start; margin: 9px 0 0 13px; }.back-link { margin-bottom: 20px; }.work-actions { margin-bottom: 28px; }.chapters-section header { padding: 18px 15px 14px; }.chapter-search { margin: 0 15px; }.chapter-list a { padding: 0 15px; grid-template-columns: 31px 1fr 12px; }.chapter-list time { display: none; }.work-page .simple-footer { margin: 0 19px; } }

/* Launch-ready discovery and writer access */
[hidden] { display:none!important; }
.header-login { color:#d9c6e9; font-size:10px; font-weight:800; text-decoration:none; }
.header-login:hover { color:#fff; }
.header-logout { padding:0; border:0; color:#d9c6e9; background:transparent; cursor:pointer; font:800 10px Manrope,Arial,sans-serif; }
.header-logout:hover { color:#fff; }
.home-showcase { position:relative; overflow:hidden; padding:23px 0 13px; border-bottom:1px solid #2a2031; background:radial-gradient(ellipse at 52% 22%,#3c2047 0,transparent 41%),linear-gradient(180deg,#17111c,#100d13); }
.home-showcase::after { content:''; position:absolute; z-index:0; right:0; bottom:0; left:0; height:58%; pointer-events:none; background:linear-gradient(180deg,transparent,#100d13); }
.showcase-heading { position:relative; z-index:1; max-width:1232px; display:flex; align-items:end; justify-content:space-between; gap:30px; margin:0 auto 16px; padding:0 14px; }.showcase-heading p { margin:0 0 7px; color:#b78ad4; font:500 9px 'DM Mono',monospace; letter-spacing:.16em; }.showcase-heading h1 { margin:0; color:#f8f2fa; font:600 clamp(23px,3.2vw,36px)/1 Fraunces,Georgia,serif; letter-spacing:-.045em; }.showcase-heading>a { flex:none; padding:8px 10px; color:#f4eaff; border:1px solid #75488d; border-radius:4px; background:#2c1c34; font-size:10px; font-weight:800; }.showcase-heading>a span { margin-left:8px; font-size:13px; }.showcase-rail { position:relative; z-index:1; display:flex; gap:10px; min-height:164px; width:max-content; padding:0 max(14px,calc((100vw - 1232px)/2 + 14px)); }.showcase-story { position:relative; display:block; flex:0 0 106px; height:150px; overflow:hidden; border:1px solid #ffffff24; border-radius:5px; background:#251c2c; box-shadow:0 8px 18px #0009; transition:transform .18s ease,border-color .18s ease; }.showcase-story:hover { z-index:2; border-color:#e0b7f3; transform:translateY(-6px) scale(1.025); }.showcase-cover { position:absolute; inset:0; }.showcase-cover img { width:100%; height:100%; object-fit:cover; }.showcase-cover.generated-cover { display:grid; align-content:space-between; padding:11px; background:radial-gradient(circle at 74% 18%,#9f5bb9 0,transparent 27%),linear-gradient(145deg,#51315e,#1d2138); }.showcase-cover.generated-cover span { color:#f3d9ff; font-size:15px; }.showcase-cover.generated-cover strong { color:#fff; font:600 18px/.9 Fraunces,Georgia,serif; letter-spacing:-.06em; }.showcase-story::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 37%,#0d0910e6); }.showcase-story>span,.showcase-story>strong { position:absolute; z-index:1; right:8px; left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.showcase-story>span { bottom:29px; color:#dac5e7; font-size:7px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.showcase-story>strong { bottom:9px; color:#fff; font-size:9px; }.fanfic-dashboard { grid-template-columns:minmax(0,1fr) 345px; max-width:1260px; align-items:start; }.fanfic-dashboard .fanfic-popular { position:sticky; top:12px; }.fanfic-popular li> b { grid-column:1; }.fanfic-popular li>a { grid-column:2; }.fanfic-popular li em i { margin-left:4px; color:#bdaabf; font-style:normal; }.fanfic-popular .dashboard-empty { display:block; padding:20px 0; }.fanfic-panel-heading h1,.fanfic-panel-heading h2 { font-size:15px; }.fanfic-card-row { min-height:196px; }.fanfic-card-row.library-card-row { min-height:0; }.updates-panel-real { min-height:0; }
@media (max-width:850px) { .fanfic-dashboard { grid-template-columns:1fr; }.fanfic-dashboard .fanfic-popular { display:block; position:static; }.showcase-rail { overflow-x:auto; width:auto; padding-bottom:7px; scrollbar-width:none; }.showcase-rail::-webkit-scrollbar { display:none; } }
@media (max-width:640px) { .home-showcase { padding-top:18px; }.showcase-heading { align-items:start; padding:0 12px; }.showcase-heading h1 { max-width:250px; font-size:25px; }.showcase-heading>a { padding:7px; font-size:9px; }.showcase-heading>a span { display:none; }.showcase-rail { min-height:145px; gap:8px; padding-right:12px; padding-left:12px; }.showcase-story { flex-basis:96px; height:137px; }.fanfic-dashboard .fanfic-popular { display:none; } }
.library-discovery { padding:18px; border:1px solid #2b2331; border-radius:5px; background:linear-gradient(145deg,#211b26,#18141d 70%); box-shadow:0 12px 28px #0004,inset 0 1px 0 #ffffff06; }
.fanfic-dashboard { grid-template-columns:minmax(0,1fr); max-width:1000px; }
.fanfic-card-row { min-height:0; }
.library-discovery>label { display:block; margin-bottom:9px; color:#e9d8f3; font:700 11px Manrope,Arial,sans-serif; letter-spacing:.04em; }
.library-search-row { display:flex; align-items:center; gap:9px; padding:0 13px; border:1px solid #523966; border-radius:5px; background:#100d13; color:#c9a8de; }
.library-search-row input { width:100%; padding:12px 0; border:0; outline:0; color:#f8f3fa; background:transparent; font:12px Manrope,Arial,sans-serif; }
.tag-filters { display:flex; flex-wrap:wrap; gap:7px; padding-top:11px; }
.tag-filters button { padding:6px 9px; border:1px solid #463050; border-radius:999px; color:#c9bdd0; background:#17121d; cursor:pointer; font-size:9px; font-weight:800; }
.tag-filters button:hover,.tag-filters button.active { color:#fff; border-color:#8a5ca7; background:#5c3473; }
.library-count { color:#b9a7c5; font-size:10px; font-weight:700; }
.fanfic-card-row.library-card-row { flex-wrap:wrap; align-content:flex-start; min-height:0; }
.story-card-tags { display:flex!important; gap:4px; min-height:16px; margin-top:6px!important; white-space:normal!important; }
.story-card-tags span { overflow:hidden; max-width:74px; padding:3px 5px; color:#cdb8dc; border:1px solid #4d3658; border-radius:999px; background:#211725; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.work-actions .save-work span { margin-left:7px; color:#b995d0; }
.reading-progress { position:fixed; z-index:10; top:0; left:0; width:100%; height:3px; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#8c64bd,#e0b8f3); box-shadow:0 0 12px #b581dc; }
.settings-popover small { display:block; margin-top:11px; color:#aaa0b4; font-size:10px; line-height:1.4; }
.login-page { min-height:100vh; color:#eeeaf2; background:radial-gradient(circle at 80% 0,#33213f 0,transparent 35rem),#0d0b10; font-family:Manrope,Arial,sans-serif; }
.login-shell { width:min(100% - 36px,480px); margin:0 auto; padding:9vh 0 60px; }
.login-shell>.simple-brand { display:inline-block; margin-bottom:34px; color:#f6eff8; text-decoration:none; }
.login-shell>.simple-brand span { color:#bd8cdd; }
.login-card { padding:32px; border:1px solid #392a45; border-radius:9px; background:linear-gradient(145deg,#211a27,#16121b); box-shadow:0 20px 50px #0008; }
.login-card h1 { margin:7px 0 13px; color:#f6eff8; font:600 clamp(32px,6vw,46px)/1 Fraunces,Georgia,serif; letter-spacing:-.04em; }
.login-card>p:not(.eyebrow) { margin:0 0 25px; color:#b7acbe; font-size:13px; line-height:1.65; }
.login-card form label { display:block; color:#d7c8e1; font-size:11px; font-weight:800; }
.login-card input { display:block; box-sizing:border-box; width:100%; margin:8px 0 17px; padding:12px; border:1px solid #4c385a; border-radius:5px; outline:0; color:#fff; background:#0d0b10; }
.login-card input:focus { border-color:#9b70bd; box-shadow:0 0 0 3px #9b70bd22; }
.login-card .start-work { border:0; cursor:pointer; }
.login-card .form-message { margin-top:17px; }
.login-card .back-link { margin:22px 0 0; }
@media (max-width:640px) { .library-discovery { padding:14px 12px; }.fanfic-card-row.library-card-row { gap:12px; }.fanfic-card-row.library-card-row .fanfic-card { flex-basis:calc(50% - 6px); }.fanfic-card-row.library-card-row .fanfic-cover { height:calc((100vw - 70px) * 1.35); }.header-login { display:none; }.login-shell { padding-top:55px; }.login-card { padding:24px 19px; } }

/* Discovery dashboard layout */
.fanfic-home .fanfic-dashboard { grid-template-columns:minmax(0,1fr) 345px; max-width:1260px; align-items:start; }
.fanfic-home .fanfic-card-row { min-height:196px; }
.fanfic-home .fanfic-card-row.library-card-row { min-height:0; }
@media (max-width:850px) { .fanfic-home .fanfic-dashboard { grid-template-columns:1fr; }.fanfic-home .fanfic-dashboard .fanfic-popular { display:block; position:static; } }
@media (max-width:640px) { .fanfic-home .fanfic-dashboard .fanfic-popular { display:none; }.fanfic-home .fanfic-card-row { min-height:199px; } }

/* Uploaded cover artwork: keep the complete portrait visible at every size. */
.fanfic-home .fanfic-cover.image-cover { display:grid; aspect-ratio:2 / 3; height:auto; place-items:center; background:#0d0b10; }
.fanfic-home .fanfic-cover.image-cover img,.fanfic-home .showcase-cover.image-cover img { object-fit:contain; }
.fanfic-home .update-real-cover.image-cover,.fanfic-home .popular-real-cover.image-cover { display:grid; aspect-ratio:2 / 3; height:auto; place-items:center; background:#0d0b10; }
.fanfic-home .update-real-cover.image-cover img,.fanfic-home .popular-real-cover.image-cover img { object-fit:contain; }
.work-cover.image-cover { padding:0; align-items:stretch; justify-content:stretch; background:#0d0b10; }
.work-cover.image-cover::before,.work-cover.image-cover::after { display:none; }
.work-cover.image-cover img { object-fit:contain; }

/* Latest updates chapter list */
.fanfic-home .fanfic-dashboard { grid-template-columns:minmax(0,1fr); max-width:1000px; }
.latest-updates-panel { min-height:0; }
.latest-updates-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; padding:0 18px; }
.latest-story { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; min-width:0; padding:14px 0; border-top:1px solid #372b3e; }
.latest-story:nth-child(-n+2) { border-top:0; }
.latest-story-cover { width:76px; aspect-ratio:2 / 3; display:grid; place-items:center; overflow:hidden; border:1px solid #ffffff1f; border-radius:4px; background:#0d0b10; box-shadow:0 6px 13px #0007; }
.latest-story-cover img { width:100%; height:100%; object-fit:contain; }
.latest-story-cover.generated-cover { padding:7px; }.latest-story-cover.generated-cover span { font-size:13px; }.latest-story-cover.generated-cover strong { max-height:44px; font-size:12px; }
.latest-story-copy { min-width:0; padding-top:1px; }.latest-story-copy>a { display:block; overflow:hidden; color:#f6f0f7; font-size:12px; font-weight:800; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }.latest-story-copy>a:hover,.latest-story-copy li>a:hover { color:#e4b9ff; }
.latest-story-copy ol { display:grid; gap:5px; padding:8px 0 0; margin:0; list-style:none; }.latest-story-copy li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:baseline; min-width:0; }.latest-story-copy li a,.latest-story-copy li span { overflow:hidden; color:#f5ecf8; font-size:10px; font-weight:700; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }.latest-story-copy li time { color:#bfa4ce; font-size:8px; white-space:nowrap; }
@media (max-width:640px) { .latest-updates-grid { grid-template-columns:1fr; padding:0 12px; }.latest-story { grid-template-columns:62px minmax(0,1fr); gap:11px; }.latest-story:nth-child(2) { border-top:1px solid #372b3e; }.latest-story-cover { width:62px; }.latest-story-copy ol { padding-top:7px; } }

/* Fablenest discovery home — scan-site inspired information density, original identity */
.fanfic-home { --berry:#a74374; --berry-dark:#722847; --rose:#ffb0ce; --plum:#21131e; --plum-2:#171016; --panel:#251923; --line:#ffffff14; background:radial-gradient(circle at 50% -24rem,#61364d 0,transparent 43rem),#130d12; }
.fanfic-home .simple-header { position:relative; z-index:10; max-width:none; height:70px; padding:0 max(22px,calc((100vw - 1230px)/2)); gap:45px; border-color:#ffffff13; background:#120c11eF; box-shadow:0 9px 30px #0004; }
.fanfic-home .simple-brand { color:#fff7fb; font-size:13px; letter-spacing:.17em; }.fanfic-home .simple-brand span { color:#ffd7e7; background:linear-gradient(135deg,#bd4e7e,#63203e); box-shadow:0 4px 14px #bd4e7e55; }
.fanfic-home .simple-header nav { gap:28px; color:#cbb9c3; font-size:11px; }.fanfic-home .simple-header nav a { transition:color .16s ease; }.fanfic-home .simple-header nav a:hover,.fanfic-home .simple-header nav .active { color:#fff; }.fanfic-home .simple-header nav .active::after { height:3px; background:linear-gradient(90deg,#e9649a,#ffbad4); }
.fanfic-home .simple-actions { gap:16px; color:#e8d6de; }.header-search-link { display:grid; width:28px; height:28px; place-items:center; color:#ffe8f1; border:1px solid #ffffff24; border-radius:50%; font-size:18px; line-height:1; transition:background .16s,border-color .16s; }.header-search-link:hover { border-color:#f682ad; background:#ffffff12; }.fanfic-home .nav-write { color:#261019!important; background:linear-gradient(135deg,#f089b4,#ffc0d7)!important; box-shadow:0 6px 16px #a73a6944; }
.home-showcase { min-height:356px; padding:0; border-color:#ffffff13; background:#160e14; }.spotlight-story { position:relative; min-height:356px; max-width:1285px; margin:auto; overflow:hidden; }.spotlight-art,.spotlight-art>div,.spotlight-cover { position:absolute; inset:0; }.spotlight-cover img { width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:saturate(.72) contrast(1.05); }.spotlight-cover.generated-cover { display:none; }.spotlight-shade { position:absolute; inset:0; background:linear-gradient(90deg,#130b10 0%,#160c12ed 34%,#160c128c 58%,#160c1218 82%),linear-gradient(0deg,#130d12b8 0%,transparent 55%); }.spotlight-copy { position:relative; z-index:1; width:min(650px,calc(100% - 48px)); padding:58px 0 45px 27px; }.spotlight-kicker { margin:0 0 11px; color:#f4a1c3; font:700 9px Manrope,Arial,sans-serif; letter-spacing:.15em; }.spotlight-kicker span { margin:0 5px; color:#896071; }.spotlight-copy h1 { max-width:620px; margin:0; color:#fff8fb; font:600 clamp(32px,4vw,51px)/.98 Fraunces,Georgia,serif; letter-spacing:-.055em; }.spotlight-summary { display:-webkit-box; max-width:540px; overflow:hidden; margin:17px 0 13px; color:#dbccd3; font-size:12px; line-height:1.72; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.spotlight-meta { display:flex; flex-wrap:wrap; gap:0; color:#c7aeba; font-size:9px; font-weight:700; }.spotlight-meta span { padding:0 10px; border-left:1px solid #ffffff2c; }.spotlight-meta span:first-child { padding-left:0; border-left:0; }.spotlight-actions { display:flex; align-items:center; gap:17px; margin-top:24px; }.spotlight-primary { display:inline-flex; align-items:center; gap:20px; padding:11px 14px; color:#2a101b; border-radius:4px; background:linear-gradient(135deg,#f079ab,#ffc3d9); box-shadow:0 7px 18px #9a315955; font-size:10px; font-weight:800; }.spotlight-primary span { font-size:15px; }.spotlight-secondary { color:#f5dce6; font-size:10px; font-weight:800; }.spotlight-secondary:hover { color:#ff9bc4; }
.fanfic-home .fanfic-dashboard { grid-template-columns:minmax(0,1fr) 304px; max-width:1285px; gap:15px; padding:17px 14px 48px; }.dashboard-feed { gap:15px; }.library-discovery,.fanfic-panel,.fanfic-popular,.sidebar-note { border-color:#ffffff14; border-radius:7px; background:linear-gradient(145deg,#261923,#1a1118 72%); box-shadow:0 11px 28px #0004,inset 0 1px #ffffff06; }.library-discovery { display:grid; grid-template-columns:195px minmax(0,1fr); gap:14px; align-items:center; padding:15px 18px; }.discovery-copy>span,.sidebar-kicker { display:block; color:#e886ac; font:700 8px Manrope,Arial,sans-serif; letter-spacing:.14em; }.library-discovery>label,.discovery-copy label { display:block; margin:6px 0 0; color:#fff2f7; font-size:13px; font-weight:800; }.library-search-row { border-color:#7f3e5b; border-radius:4px; background:#130b10; }.library-search-row:focus-within { border-color:#ee7fa8; box-shadow:0 0 0 3px #d7547b1c; }.library-search-row input { font-size:11px; }.tag-filters { grid-column:1 / -1; margin-top:-4px; }.tag-filters button { border-color:#754257; background:#24131e; }.tag-filters button:hover,.tag-filters button.active { border-color:#df6d9a; background:#9d3b68; }
.fanfic-panel,.fanfic-popular { background:linear-gradient(145deg,#261923,#1a1118 72%); }.fanfic-panel-heading,.fanfic-popular>header { min-height:49px; padding:0 16px; border-color:#ffffff12; background:#2b1b26a8; }.fanfic-panel-heading h2,.fanfic-popular h2 { font-size:14px; }.panel-badge { width:22px; height:22px; color:#ffe7f0; background:linear-gradient(135deg,#a23a6a,#5d2948); }.panel-badge.gold { color:#3a210d; background:linear-gradient(135deg,#ffe19b,#d88d38); }.fanfic-panel-heading>a { color:#fff0f5; background:#843257; }.fanfic-card-row { min-height:0; gap:12px; padding:14px 16px 16px; background:linear-gradient(90deg,#120c103d,transparent 40%); }.fanfic-card { flex-basis:112px; }.fanfic-cover { height:157px; border-color:#ffffff27; border-radius:4px; background:#291722; box-shadow:0 8px 16px #0009; }.fanfic-card a:hover .fanfic-cover { box-shadow:0 13px 22px #000b,0 0 0 1px #ed7ca8; }.fanfic-card h3 { color:#fff4f8; font-size:10px; }.fanfic-card small { color:#c5aeba; font-size:9px; }.fanfic-card p { color:#ffbd59; }.story-card-tags span { color:#e4bed0; border-color:#744058; background:#28141f; }.latest-updates-grid { padding:0 16px; }.latest-story { grid-template-columns:68px minmax(0,1fr); padding:12px 0; border-color:#ffffff15; }.latest-story-cover { width:68px; }.latest-story-copy>a { color:#fff4f8; }.latest-story-copy li a,.latest-story-copy li span { color:#f5e8ee; }.latest-story-copy li time { color:#e9a4bf; }
.fanfic-sidebar { display:grid; align-content:start; gap:15px; }.fanfic-popular { padding-bottom:5px; }.fanfic-popular>header { align-items:center; }.fanfic-popular h2 { margin-top:3px; }.popular-period { color:#cbb1bd; font:700 8px Manrope,Arial,sans-serif; letter-spacing:.09em; }.fanfic-popular ol { padding:7px 13px 8px; }.fanfic-popular li { grid-template-columns:22px minmax(0,1fr); min-height:57px; padding:5px 0; }.fanfic-popular li>b { width:19px; height:19px; color:#ffe7f0; background:#743252; font-size:8px; }.fanfic-popular li>a { grid-template-columns:35px minmax(0,1fr); gap:9px; }.popular-real-cover { width:35px; height:44px; background:#321b27; }.fanfic-popular li strong { color:#fff4f8; font-size:10px; }.fanfic-popular li small { color:#c2aab6; font-size:8px; }.fanfic-popular li em { color:#f2a3c3; font-size:8px; }.fanfic-popular li>a:hover { background:transparent; }.fanfic-popular li>a:hover strong { color:#ffb8d2; }.sidebar-note { display:flex; gap:11px; padding:15px; color:#d7c1ca; }.sidebar-note>span { display:grid; flex:none; width:27px; height:27px; place-items:center; color:#ffd5e4; border-radius:5px; background:#793454; }.sidebar-note strong { display:block; color:#fff1f6; font-size:10px; }.sidebar-note p { margin:5px 0 0; color:#bda6b0; font-size:9px; line-height:1.55; }.fanfic-home .simple-footer { max-width:1257px; color:#f2bbd0; border-color:#ffffff14; }
@media (max-width:850px) { .fanfic-home .fanfic-dashboard { grid-template-columns:1fr; }.fanfic-sidebar { grid-template-columns:minmax(0,1fr) minmax(220px,.55fr); }.fanfic-home .fanfic-dashboard .fanfic-popular { display:block; }.spotlight-copy { padding-left:22px; } }
@media (max-width:640px) { .fanfic-home .simple-header { height:58px; padding:0 16px; }.fanfic-home .simple-header nav,.fanfic-home .simple-actions { display:none; }.fanfic-home .simple-menu { display:block; }.fanfic-home .mobile-nav { top:58px; background:#21121b; }.home-showcase,.spotlight-story { min-height:360px; }.spotlight-art { opacity:.55; }.spotlight-shade { background:linear-gradient(90deg,#130b10e8,#130b10b8 85%),linear-gradient(0deg,#130d12c7,transparent); }.spotlight-copy { width:calc(100% - 32px); padding:46px 0 32px 16px; }.spotlight-copy h1 { font-size:35px; }.spotlight-summary { -webkit-line-clamp:3; }.spotlight-meta span:nth-child(3) { display:none; }.fanfic-home .fanfic-dashboard { padding:11px 9px 32px; }.library-discovery { grid-template-columns:1fr; gap:10px; padding:14px 12px; }.tag-filters { grid-column:auto; }.fanfic-card-row { gap:10px; padding:12px; }.fanfic-card { flex-basis:100px; }.fanfic-cover { height:140px; }.latest-updates-grid { padding:0 12px; }.latest-story { grid-template-columns:62px minmax(0,1fr); }.latest-story-cover { width:62px; }.fanfic-sidebar { grid-template-columns:1fr; }.sidebar-note { display:none; }.fanfic-home .fanfic-dashboard .fanfic-popular { display:block; }.fanfic-popular ol { display:grid; grid-template-columns:1fr 1fr; column-gap:12px; }.fanfic-popular li { min-width:0; }.fanfic-popular li:nth-child(n+7) { display:none; }.fanfic-popular li>a { grid-template-columns:31px minmax(0,1fr); gap:7px; }.popular-real-cover { width:31px; height:40px; }.fanfic-popular li>b { display:none; }.fanfic-popular li { grid-template-columns:1fr; } }

/* Shared violet night theme — every page uses the same calm palette without changing its layout. */
body.home-v5,body.publish-page,body.dynamic-work-page,body.reader-page,.login-page,.fanfic-home { color:#f0ebf5; background:radial-gradient(circle at 76% -18%,#302542 0,transparent 37rem),#0e0b13; }
.simple-header,.reader-header { border-color:#ffffff10; background:#100d16f2; box-shadow:0 8px 28px #00000042; }.simple-header .simple-brand,.reader-header .brand { color:#f6f1fa; }.simple-header .simple-brand span,.reader-header .brand-mark { color:#d9caef; }.simple-footer { color:#bfaed6; border-color:#ffffff10; }.simple-footer span { color:#887d94; }
.reader-page { background:radial-gradient(circle at 50% -22rem,#2c223d 0,transparent 38rem),#0e0b13; }.reader-page .reader-header { background:#100d16ef; }.reader-page .settings-button,.reader-page .font-controls button { border-color:#ffffff18; background:#17121e; }.reader-page .settings-popover { border-color:#ffffff14; background:#1c1624; }.reader-page .chapter-copy { color:#e3dce9; }.reader-page .chapter-copy em { color:#d4c0ee; }.reader-page .chapter-button { border-color:#ffffff12; background:#18131f; }.reader-page .chapter-button.next { border-color:#9277b9; background:linear-gradient(135deg,#4d3a68,#6f568f); }.reader-page .chapter-button:not(:disabled):hover { border-color:#bea8df; background:#211a2b; }
.publish-page { background:radial-gradient(circle at 86% -12%,#2f253e 0,transparent 35rem),#0e0b13; }.publish-page .writer-sidebar,.publish-page .story-editor { color:#ede7f2; }.publish-page .editor-section,.publish-page .cover-upload-preview { border-color:#ffffff12; background:linear-gradient(145deg,#1d1725,#15111b); box-shadow:0 12px 28px #00000032; }.publish-page .cover-upload { border-color:#5b4971; background:#21192b; }.publish-page .editor-section input,.publish-page .editor-section textarea,.publish-page .editor-section select { border-color:#ffffff18; background:#100d16; }.publish-page .editor-section input:focus,.publish-page .editor-section textarea:focus,.publish-page .editor-section select:focus { border-color:#a98bce; box-shadow:0 0 0 3px #a98bce22; }.publish-page .nav-write,.publish-page .start-work,.login-page .start-work { color:#160f1c!important; background:linear-gradient(135deg,#9578bd,#c6afe1)!important; box-shadow:0 7px 17px #77559d3d; }.publish-page .save-work,.publish-page .secondary-editor-button { color:#e9e0f1; border-color:#715a8e!important; background:#211a2b!important; }.publish-page .form-message { border-color:#715a8e; background:#211929; }
.login-page { background:radial-gradient(circle at 78% -12%,#302542 0,transparent 34rem),#0e0b13; }.login-card { border-color:#ffffff14; background:linear-gradient(145deg,#201928,#15111b); box-shadow:0 22px 55px #00000061; }.login-card input { border-color:#ffffff1c; background:#100d16; }.login-card input:focus { border-color:#a98bce; box-shadow:0 0 0 3px #a98bce22; }.login-shell>.simple-brand span { color:#c9b6e4; }
.work-page { --ink:#0e0b13; --panel:#19141f; --line:#ffffff12; --lilac:#c9b6e4; background:radial-gradient(circle at 82% -10%,#302542 0,transparent 37rem),#0e0b13; }.work-cover { border-color:#bba7dc62; background:radial-gradient(circle at 70% 19%,#dac8f2 0,transparent 7%),radial-gradient(circle at 39% 36%,#62517d 0,transparent 30%),linear-gradient(155deg,#2a2039,#35294a 56%,#121019); }.work-cover::after { border-color:#c8b4e6; box-shadow:inset 0 0 0 6px #2c213d; }.work-stats,.chapters-section { border-color:#ffffff12; background:#19141fe8; }.work-stats b,.work-byline a,.chapter-index,.chapter-list b { color:#cdb8ea; }.work-stats span,.work-byline,.chapter-list small,.chapter-list time,.chapters-section header span { color:#a69bab; }.work-tags span { color:#cfc3dc; border-color:#ffffff12; background:#1b1522; }.back-link { color:#baabd3; }.back-link:hover { color:#e0d3f2; }.work-eyebrow,.work-divider { color:#bfa7dc; }.synopsis { color:#c5bbcf; }.start-work { color:#160f1c; background:linear-gradient(135deg,#9578bd,#c6afe1); }.save-work { color:#e7e0ed; border-color:#79609566; background:#1e1726; }.chapter-list a:hover { background:#ffffff06; }
.fanfic-home { --violet:#9177b6; --violet-deep:#57446f; --lavender:#d6c7eb; --plum:#1e1827; --plum-2:#14101a; --panel:#1d1725; --line:#ffffff12; background:radial-gradient(circle at 50% -24rem,#332744 0,transparent 43rem),#0e0b13; }.fanfic-home .simple-header { border-color:#ffffff10; background:#100d16f2; }.fanfic-home .simple-brand { color:#f6f1fa; }.fanfic-home .simple-brand span { color:#e3d7f3; background:linear-gradient(135deg,#8d72b3,#47365e); box-shadow:0 4px 14px #8164a238; }.fanfic-home .simple-header nav { color:#c3b8cb; }.fanfic-home .simple-header nav a:hover,.fanfic-home .simple-header nav .active { color:#f7f2fb; }.fanfic-home .simple-header nav .active::after { background:linear-gradient(90deg,#9476bd,#d7c4ef); }.header-search-link { color:#e6daf4; border-color:#ffffff1d; }.header-search-link:hover { border-color:#ae93d0; background:#ffffff0b; }.fanfic-home .nav-write { color:#171020!important; background:linear-gradient(135deg,#9274bb,#c9b3e5)!important; box-shadow:0 6px 16px #75549b38; }
.home-showcase { background:linear-gradient(180deg,#18121f,#0e0b13); border-color:#ffffff10; }.spotlight-shade { background:linear-gradient(90deg,#0f0b13 0%,#100c14ec 34%,#100c148c 58%,#100c1418 82%),linear-gradient(0deg,#0e0b13b8 0%,transparent 55%); }.spotlight-kicker { color:#cbb6e5; }.spotlight-kicker span,.spotlight-meta { color:#a99cac; }.spotlight-copy h1 { color:#f8f3fb; }.spotlight-summary { color:#c9bfce; }.spotlight-primary { color:#171020; background:linear-gradient(135deg,#9375bc,#cdb8e6); box-shadow:0 7px 18px #70509342; }.spotlight-secondary { color:#e0d4ed; }.spotlight-secondary:hover { color:#c9afe7; }
.library-discovery,.fanfic-panel,.fanfic-popular,.sidebar-note { border-color:#ffffff12; background:linear-gradient(145deg,#201927,#16111c 72%); box-shadow:0 11px 28px #0000003b,inset 0 1px #ffffff06; }.discovery-copy>span,.sidebar-kicker { color:#c6afe3; }.library-discovery>label,.discovery-copy label,.fanfic-panel-heading h2,.fanfic-popular h2 { color:#f3edf7; }.library-search-row { border-color:#5f4a78; background:#100d16; }.library-search-row:focus-within { border-color:#a78acb; box-shadow:0 0 0 3px #a78acb1c; }.tag-filters button { color:#cfc3d8; border-color:#5a486d; background:#1d1625; }.tag-filters button:hover,.tag-filters button.active { border-color:#a58ac9; background:#70558f; }.fanfic-panel-heading,.fanfic-popular>header { border-color:#ffffff10; background:#241c2ba8; }.panel-badge { color:#eee5fa; background:linear-gradient(135deg,#896bb0,#49375f); }.panel-badge.gold { color:#372417; background:linear-gradient(135deg,#e8d8ab,#b79a62); }.fanfic-panel-heading>a { color:#f7f1fb; background:#72558f; }.fanfic-card-row { background:linear-gradient(90deg,#100c143d,transparent 40%); }.fanfic-cover { background:#211829; border-color:#ffffff20; }.fanfic-card a:hover .fanfic-cover { box-shadow:0 13px 22px #000b,0 0 0 1px #ae91d1; }.fanfic-card h3,.latest-story-copy>a,.latest-story-copy li a,.latest-story-copy li span,.fanfic-popular li strong { color:#f4eef8; }.fanfic-card small,.fanfic-popular li small { color:#b8adbf; }.fanfic-card p { color:#cdb3e5; }.story-card-tags span { color:#d4c5df; border-color:#5b476e; background:#211826; }.latest-story { border-color:#ffffff12; }.latest-story-copy>a:hover,.latest-story-copy li>a:hover { color:#d3bbea; }.latest-story-copy li time,.fanfic-popular li em { color:#bda3d8; }.fanfic-popular li>b { color:#f3eafa; background:#72558f; }.popular-real-cover { background:#261c30; }.popular-period { color:#bdaec5; }.sidebar-note { color:#cec1d5; }.sidebar-note>span { color:#ede3f8; background:#71558e; }.sidebar-note strong { color:#f4edf8; }.sidebar-note p { color:#afa2b6; }.fanfic-home .simple-footer { color:#c5b2dd; border-color:#ffffff10; }
@media (max-width:640px) { .fanfic-home .mobile-nav { background:#19121f; }.spotlight-shade { background:linear-gradient(90deg,#0f0b13e8,#0f0b13b8 85%),linear-gradient(0deg,#0e0b13c7,transparent); } }

/* Uploaded artwork should fill its portrait frame: no letterbox strips, softer card corners. */
.fanfic-home .fanfic-cover.image-cover,.fanfic-home .update-real-cover.image-cover,.fanfic-home .popular-real-cover.image-cover,.latest-story-cover,.work-cover.image-cover { overflow:hidden; border-radius:8px; background:#15101b; }
.fanfic-home .fanfic-cover.image-cover img,.fanfic-home .update-real-cover.image-cover img,.fanfic-home .popular-real-cover.image-cover img,.latest-story-cover img,.work-cover.image-cover img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.fanfic-home .fanfic-cover,.fanfic-home .popular-real-cover,.latest-story-cover { border-radius:8px; }.work-cover { border-radius:10px; }