@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600;6..96,700;6..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root { --ink:#141414; --panel:#1b1b1b; --panel-hi:#242424; --paper:#f4f3ee; --muted:#a8aaa3; --line:rgba(236,242,224,.14); --lime:#c9f04a; --emerald:#53c58d; --serif:'Bodoni Moda', Georgia, serif; --sans:'DM Sans', ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; color:var(--paper); background:var(--ink); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.offer-bar { position:relative; z-index:10; display:flex; min-height:34px; align-items:center; justify-content:center; gap:18px; padding:6px 20px; color:#171b14; background:var(--lime); font-size:11px; letter-spacing:.02em; }
.offer-bar p { margin:0; }.offer-bar strong { font-weight:700; }.offer-bar button { border:0; padding:0; color:inherit; background:transparent; font-size:18px; cursor:pointer; }
.site-header { position:absolute; z-index:5; top:34px; left:0; width:100%; }
.nav { display:flex; width:min(1240px,calc(100% - 64px)); min-height:88px; margin:auto; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:7px; color:#fff; font-size:18px; font-weight:700; letter-spacing:-.06em; }.logo span { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; color:#182016; background:var(--lime); font-family:var(--serif); font-size:22px; font-style:italic; font-weight:800; }
.nav-links,.nav-actions { display:flex; align-items:center; gap:27px; }.nav-links { margin-left:60px; color:#d0d2cb; font-size:13px; }.nav-links a { transition:color .2s ease; }.nav-links a:hover { color:var(--lime); }.nav-actions { gap:19px; font-size:13px; }.search-button { border:0; padding:4px; color:#fff; background:none; font-size:21px; line-height:1; cursor:pointer; }.signin { color:#d4d6d0; }.nav-cta,.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:14px; border:1px solid transparent; border-radius:999px; padding:12px 19px; color:#152014; background:var(--lime); font-size:13px; font-weight:700; transition:transform .2s ease, background .2s ease; }.nav-cta:hover,.primary-button:hover { transform:translateY(-2px); background:#dcff69; }.primary-button span { font-size:19px; line-height:.7; }

.hero { position:relative; isolation:isolate; min-height:710px; overflow:hidden; padding:max(190px,15vw) max(32px,calc((100% - 1240px)/2)) 96px; background:radial-gradient(ellipse 70% 100% at 76% 53%,#254738 0%,transparent 53%),linear-gradient(120deg,#101110 8%,#171918 52%,#111312); }.hero::before { position:absolute; z-index:-1; top:0; right:-10%; width:63%; height:100%; content:""; opacity:.85; background:repeating-linear-gradient(110deg,transparent 0 42px,rgba(201,240,74,.045) 43px 44px),radial-gradient(circle at 52% 48%,rgba(201,240,74,.16),transparent 3%,transparent 22%),radial-gradient(circle at 72% 64%,rgba(83,197,141,.28),transparent 2%,transparent 31%); filter:blur(.2px); }.hero::after { position:absolute; z-index:-1; right:0; bottom:0; left:0; height:160px; content:""; background:linear-gradient(transparent,var(--ink)); }
.hero-glow { position:absolute; top:20%; right:24%; width:440px; height:440px; border-radius:50%; opacity:.35; background:radial-gradient(circle,#b9f46c 0 1%,#3e9c68 16%,transparent 64%); filter:blur(28px); }.hero-copy { position:relative; z-index:2; width:min(540px,53%); }.kicker,.eyebrow { margin:0 0 13px; color:var(--lime); font-size:10px; font-weight:700; letter-spacing:.18em; }.hero h1 { max-width:560px; margin:0; color:#f8f8f4; font-family:var(--serif); font-size:clamp(59px,6vw,92px); font-weight:600; letter-spacing:-.07em; line-height:.89; }.hero h1 em { color:var(--lime); font-weight:500; }.hero-text { max-width:440px; margin:27px 0; color:#bec1b9; font-size:15px; line-height:1.75; }.hero-actions { display:flex; align-items:center; gap:23px; }.play-link { color:#e1e5dd; font-size:13px; font-weight:600; }.play-link i { display:inline-grid; width:27px; height:27px; margin-right:7px; place-items:center; border:1px solid #c9f04a80; border-radius:50%; color:var(--lime); font-size:9px; font-style:normal; }.reader-proof { display:flex; align-items:center; gap:10px; margin:52px 0 0; color:#aeb2aa; font-size:12px; }.avatars { display:flex; }.avatars b { display:grid; width:27px; height:27px; margin-left:-7px; place-items:center; border:2px solid #1f352b; border-radius:50%; color:#172116; background:#9bc778; font-size:10px; }.avatars b:first-child { margin-left:0; background:#d0dd9d; }.avatars b:nth-child(2) { background:#6cb596; }
.hero-books { position:absolute; right:max(20px,calc((100% - 1240px)/2)); bottom:22px; width:48%; height:495px; }.hero-book { position:absolute; width:190px; height:302px; padding:22px 19px; overflow:hidden; border:1px solid rgba(235,255,211,.35); box-shadow:0 26px 45px rgba(0,0,0,.5); color:#fff; font-family:var(--serif); }.hero-book::after,.story-cover::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(140deg,rgba(255,255,255,.2),transparent 20% 74%,rgba(0,0,0,.22)); mix-blend-mode:screen; }.hero-book:nth-child(1) { bottom:51px; left:0; transform:rotate(-10deg); }.hero-book:nth-child(2) { z-index:2; bottom:0; left:145px; width:224px; height:354px; transform:rotate(4deg); }.hero-book:nth-child(3) { right:0; bottom:59px; transform:rotate(12deg); }.hero-book p,.story-cover p { position:relative; z-index:1; margin:0; font:700 9px var(--sans); letter-spacing:.16em; }.hero-book h2 { position:relative; z-index:1; margin:15px 0; font-size:32px; font-weight:600; letter-spacing:-.08em; line-height:.83; }.hero-book small { position:absolute; z-index:1; bottom:20px; font:11px var(--sans); }.floating-rating { position:absolute; z-index:3; right:8%; bottom:8px; padding:12px 14px; border:1px solid rgba(201,240,74,.3); border-radius:4px; color:#172015; background:var(--lime); box-shadow:0 12px 30px #0008; font-size:15px; font-weight:700; }.floating-rating span { display:block; margin-top:2px; font-size:10px; font-weight:500; }.cover-blue { background:linear-gradient(165deg,rgba(10,25,30,.1),rgba(10,31,34,.2)),url('assets/tide-cover.png') center/cover,#0f4245; }.cover-ember { background:radial-gradient(circle at 70% 22%,#e7df7b 0 2%,transparent 12%),linear-gradient(150deg,#20342b,#49723a 52%,#b2bd58); }.cover-rose { background:radial-gradient(circle at 66% 19%,#d1f260 0 2%,transparent 13%),linear-gradient(145deg,#1d2926,#315d49 53%,#71976b); }.cover-lilac { background:radial-gradient(circle at 72% 25%,#e3f98b 0 2%,transparent 11%),linear-gradient(150deg,#26352d,#456353 55%,#81a987); }.cover-night { background:radial-gradient(circle at 70% 19%,#cdf144 0 2%,transparent 9%),linear-gradient(150deg,#111916,#27382e 55%,#4d735a); }

.genre-section,.shelf-section,.list-section { width:min(1240px,calc(100% - 64px)); margin:auto; padding-top:92px; }.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:31px; }.section-title h2,.feature-strip h2,.join h2 { margin:0; color:#f5f6ef; font-family:var(--serif); font-size:clamp(32px,3vw,49px); font-weight:600; letter-spacing:-.065em; line-height:1; }.section-title > a,.text-link { color:var(--lime); font-size:12px; font-weight:700; }.genres { display:grid; grid-template-columns:repeat(5,1fr); gap:11px; }.genre { display:flex; align-items:center; justify-content:center; gap:9px; min-height:66px; border:1px solid var(--line); border-radius:2px; color:#d0d4ca; background:#1a1c1a; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .2s,background .2s,color .2s; }.genre:hover,.genre.active { border-color:var(--lime); color:#151b13; background:var(--lime); }.genre-icon { color:var(--emerald); font-size:19px; }.genre.active .genre-icon,.genre:hover .genre-icon { color:#1d3c29; }
.story-shelf { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }.story { position:relative; min-width:0; }.rank { position:absolute; z-index:3; top:12px; left:12px; color:var(--lime); font-family:var(--serif); font-size:25px; font-weight:700; text-shadow:0 2px 8px #000; }.story-cover { position:relative; height:303px; padding:23px 18px; overflow:hidden; border:1px solid rgba(232,249,199,.18); box-shadow:0 14px 30px rgba(0,0,0,.3); color:#fff; }.story-cover h3 { position:relative; z-index:1; margin:13px 0; font-family:var(--serif); font-size:28px; font-weight:600; letter-spacing:-.07em; line-height:.84; }.story > h3 { margin:15px 0 3px; color:#f1f3eb; font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:-.04em; }.story > p,.story > span { margin:0; color:#969b91; font-size:12px; }.story > span { display:block; margin-top:8px; color:#bfe550; font-weight:600; }.no-results { color:#aeb5aa; text-align:center; }
.feature-strip { display:grid; grid-template-columns:42% 1fr; align-items:center; gap:68px; width:min(1240px,calc(100% - 64px)); margin:108px auto 0; padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.feature-art { position:relative; height:320px; overflow:hidden; background:linear-gradient(135deg,#315c44,#1e322b); }.feature-art span { display:grid; height:100%; place-items:center; color:var(--lime); font-family:var(--serif); font-size:112px; }.feature-strip > div:last-child p:not(.eyebrow) { max-width:475px; color:#a5aaa1; font-size:15px; line-height:1.7; }.feature-strip .text-link { display:inline-block; margin-top:9px; }
.lists { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.list-card { min-height:245px; padding:25px; border:1px solid rgba(226,241,206,.13); color:#fff; background:#20231f; }.list-card span { color:var(--lime); font-size:11px; font-weight:700; }.list-card h3 { margin:43px 0 10px; font-family:var(--serif); font-size:36px; font-weight:600; letter-spacing:-.065em; line-height:.87; }.list-card p { margin:0; color:#c4cbbd; font-size:12px; }.card-a { background:linear-gradient(140deg,#273b2c,#5b7750); }.card-b { background:linear-gradient(140deg,#172b29,#356554); }.card-c { background:linear-gradient(140deg,#2d3422,#61773d); }
.join { position:relative; overflow:hidden; margin-top:110px; padding:105px 24px; text-align:center; background:radial-gradient(circle at 50% 115%,#477956,transparent 40%),linear-gradient(120deg,#17231b,#223a2c); }.join::before { position:absolute; inset:12px; border:1px solid rgba(202,240,74,.26); content:""; pointer-events:none; }.join .eyebrow { position:relative; }.join h2 { position:relative; margin-bottom:31px; font-size:clamp(46px,5vw,68px); }.light { color:#172016; background:#f4f3ee; }.light:hover { background:#fff; } footer { display:flex; align-items:center; justify-content:space-between; width:min(1240px,calc(100% - 64px)); margin:auto; padding:37px 0; color:#8c9388; font-size:12px; } footer .logo { color:#f3f5ee; } footer > div { display:flex; gap:18px; }

a:focus-visible,button:focus-visible { outline:3px solid #f4f3ee; outline-offset:4px; }
@media (max-width:860px) { .nav { width:calc(100% - 40px); }.nav-links { gap:16px; margin-left:20px; }.hero { min-height:720px; padding-left:32px; }.hero-books { right:-35px; width:52%; transform:scale(.83); transform-origin:right bottom; }.genres { grid-template-columns:repeat(3,1fr); }.story-shelf { grid-template-columns:repeat(3,1fr); }.story:nth-child(n+4) { display:none; } }
@media (max-width:620px) { .offer-bar { padding-right:34px; font-size:10px; text-align:center; }.offer-bar button { position:absolute; right:13px; }.site-header { top:34px; }.nav { width:calc(100% - 32px); min-height:70px; }.nav-links,.signin,.search-button { display:none; }.nav-actions { gap:0; }.nav-cta { padding:10px 14px; font-size:11px; }.hero { min-height:740px; padding:119px 20px 0; }.hero-copy { width:100%; }.hero h1 { font-size:60px; }.hero-text { max-width:360px; font-size:14px; }.hero-books { right:-77px; bottom:-12px; width:100%; height:310px; transform:scale(.61); }.hero-book:nth-child(2) { left:126px; }.reader-proof { margin-top:28px; }.genre-section,.shelf-section,.list-section { width:calc(100% - 32px); padding-top:65px; }.section-title { margin-bottom:24px; }.section-title > a { display:none; }.genres,.story-shelf,.lists { display:flex; overflow-x:auto; padding:2px 1px 14px; scrollbar-width:none; }.genres::-webkit-scrollbar,.story-shelf::-webkit-scrollbar,.lists::-webkit-scrollbar { display:none; }.genre { flex:0 0 150px; min-height:56px; }.story { flex:0 0 165px; }.story:nth-child(n+4) { display:block; }.story-cover { height:235px; }.feature-strip { grid-template-columns:1fr; gap:31px; width:calc(100% - 32px); margin-top:69px; padding-bottom:31px; }.feature-art { height:190px; }.feature-strip > div:last-child { padding:0 4px; }.list-card { min-width:245px; }.join { margin-top:72px; padding:81px 20px; }.join::before { inset:8px; }.join h2 { font-size:45px; } footer { width:calc(100% - 32px); flex-wrap:wrap; gap:16px; padding:28px 0; } footer p { width:100%; margin:0; order:3; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }