/* Landing geometry measured against the public reference at 1280 × 720. */
:root{--sans:Figtree,Arial,sans-serif}
.header{position:sticky;top:0;z-index:50;height:65px;border-bottom:1px solid #ffffff14;background:transparent;backdrop-filter:blur(24px)}
.header>.nav.wrap{width:100%;max-width:none;height:64px;margin:0;padding:0 10vw}
.header .wordmark,.footer .wordmark{font:400 39px/1 Georgia,serif;letter-spacing:-1.8px}
.wordmark span{display:none}
.header .nav-actions{gap:8px}
.header .nav-actions .login{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;font:600 14px/20px var(--sans);color:#ffffffb3}
.header .nav-actions .pill{height:36px;justify-content:center;gap:8px;padding:0 12px;border:0;border-radius:9999px;background:#f2efea;color:#111;font:600 14px/20px var(--sans)}
.header .pill:hover{background:#faf8f4;transform:none}
.hero.wrap{position:relative;isolation:isolate;display:grid;width:100%;max-width:none;min-height:calc(100svh - 64px);margin:0;padding:40px 10vw;grid-template-columns:minmax(0,.98fr) minmax(320px,.72fr);align-items:center;gap:40px;overflow:hidden}
.hero-copy{width:100%;max-width:560px}
.hero h1{margin:0;color:#faf8f4;font:700 48px/48px var(--sans);letter-spacing:normal}
.hero-first:after{content:none}
.hero-underline{position:relative;display:inline-block;border:0}
.hero-underline:after{content:'';position:absolute;bottom:-8px;left:0;width:100%;height:4px;border-radius:999px;background:#7b1e2b}
.hero-description{max-width:464px;margin:20px 0 0;font:600 16px/28px var(--sans);color:#f2efea}
.genre-links{display:grid;gap:12px;margin:24px 0 0}
.hero .genre-link{display:flex;min-height:78px;padding:12px 20px;gap:16px;align-items:center;text-align:left;border:1px solid #ffffff1a;border-radius:17.6px;background:transparent;box-shadow:0 16px 48px #0000002e}
.hero .genre-link:hover{border-color:#b9506180;background:#1f1f1fcc;transform:none}
.hero .genre-link strong{display:block;font:700 18px/28px var(--sans);color:#faf8f4}
.hero .genre-link small{display:block;margin:4px 0 0;font:600 14px/20px var(--sans);color:#ffffff66}
.hero .genre-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:10.4px;background:#ffffff0e}
.hero .genre-icon svg{width:20px;height:20px;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero .genre-link .arrow{display:none}
.hero-bottom{display:flex;align-items:center;gap:16px;height:32px;margin-top:28px}
.hero-bottom .round-mark{flex:0 0 32px;width:32px;height:32px;font-size:18px;border:2px solid #111;background:#7b1e2b;color:#faf8f4}
.hero-bottom p{font:600 13px/16px var(--sans);color:#f2efea}
.hero-bottom small{font:500 10px/16px var(--sans);color:#ffffff6b}
.hero-library{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px}
.hero-library>.pill{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border:1px solid #ffffff1a;border-radius:9999px;background:#f2efea;color:#111;font:600 14px/20px var(--sans)}
.hero-library>.pill:hover{background:#faf8f4;transform:none}
.hero-library>span{font:600 14px/20px var(--sans);color:#ffffff6b}
.genre-strip{display:none}
.hero-visual{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-self:start;gap:4px;width:100%;max-width:704px;height:clamp(576px,calc(100svh - 128px),832px);min-height:0;margin:0 auto;padding:24px;overflow:visible}
.hero-visual .aura{position:absolute;inset:0;background:radial-gradient(circle at 60% 42%,#7b1e2b40,transparent 320px);pointer-events:none}
.hero-visual .ambient-book{position:absolute;inset:10% 16%;width:auto;height:auto;left:16%;top:10%;border:1px solid #ffffff1a;border-radius:32px;background-size:cover;background-position:center;opacity:.5;transform:rotate(-2.5deg);filter:none;box-shadow:0 25px 50px -12px #0006;pointer-events:none}
.hero-visual .ambient-book:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#1111112e,#1111117a 52%,#111111d1);border-radius:inherit}
.hero-visual .cover{position:relative;inset:auto;align-self:stretch;justify-self:stretch;width:auto;height:auto;min-height:0;min-width:0;margin:8px;padding:0;overflow:hidden;border:1px solid #ffffff1a;border-radius:21.6px;background-color:#1f1f1f;box-shadow:0 25px 50px -12px #0006;text-align:left;cursor:default}
.hero-visual .cover:hover{filter:none;translate:none}
.hero-visual .cover-romance{grid-column:1;grid-row:1;z-index:20;transform:translate(-20px,-12px) rotate(-4deg)}
.hero-visual .cover-space{grid-column:2;grid-row:1;z-index:10;transform:translate(20px,4px) rotate(2.75deg)}
.hero-visual .cover-detective{grid-column:1;grid-row:2;z-index:10;transform:translate(-4px,16px) rotate(3.25deg)}
.hero-visual .cover-art{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-visual .cover-shade{position:absolute;inset:0;background:linear-gradient(to top,#111,transparent)}
.hero-visual .cover-text{position:absolute;inset:auto 16px 16px}
.hero-visual .cover-text small{display:inline-block;width:fit-content;padding:4px 12px;border-radius:9999px;background:#7b1e2b;color:#faf8f4;font:700 10.88px/16.32px var(--sans);letter-spacing:1.9584px;text-transform:uppercase}
.hero-visual .cover-text h2{display:block;margin:8px 0 0;color:#faf8f4;font:700 16px/24px var(--sans)}
.hero-visual .cover-text>span{display:none}
.hero-visual .floating-note{position:absolute;top:60px;right:-8px;z-index:40;display:block;padding:12px 16px;border:1px solid #b950614d;border-radius:12px;background:transparent;box-shadow:0 25px 50px -12px #00000059;backdrop-filter:blur(12px);transform:rotate(2deg)}
.hero-visual .floating-note>span{display:block;color:#dfabb4;font:700 24px/24px var(--sans)}
.hero-visual .floating-note small{display:block;margin-top:4px;color:#ffffff7a;font:700 10.88px/16.32px var(--sans);letter-spacing:2.3936px}
.hero-visual .scene-note{position:relative;inset:auto;grid-column:2;grid-row:2;align-self:end;z-index:30;width:auto;min-width:0;margin:8px;padding:16px;border:1px solid #ffffff1a;border-radius:16px;background:transparent;box-shadow:0 25px 50px -12px #00000059;backdrop-filter:blur(12px);transform:translate(20px,4px) rotate(-2deg)}
.hero-visual .scene-note p{margin:12px 0 0;color:#ffffff9e;font:600 14px/24px var(--sans)}
.hero-visual .scene-note>span{display:block;margin-top:16px;color:#ffffff5c;font:600 12px/16px var(--sans)}
.hero-visual .scene-note button{width:100%;margin-top:12px;padding:0;border:0;background:none;color:#faf8f4;font:700 14px/20px var(--sans)}
.hero-visual .note-line{width:80px;height:14px;margin:0;background:linear-gradient(90deg,#d0c397 12%,transparent 12%,transparent 20%,#d0c397 20%,#d0c397 32%,transparent 32%,transparent 40%,#d0c397 40%,#d0c397 52%,transparent 52%,transparent 60%,#d0c397 60%,#d0c397 72%,transparent 72%,transparent 80%,#d0c397 80%,#d0c397 92%,transparent 92%)}
.how.wrap{position:relative;width:100%;max-width:none;margin:0;padding:96px 10vw}
.how>.section-heading{width:100%;max-width:544px;margin:0 auto;text-align:center}
.how .section-heading h2{margin:0;color:#faf8f4;font:700 48px/48px var(--sans);letter-spacing:normal}
.how-grid{display:grid;grid-template-columns:1fr;gap:56px;max-width:1472px;margin:40px auto 0}
.how .how-card{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:48px;width:100%;max-width:none;margin:0;padding:16px 0}
.how .how-copy{width:100%;max-width:720px;padding:0}
.how .how-copy>span{display:none}
.how .how-copy h3{min-height:0;margin:0;color:#faf8f4;font:700 30px/36px var(--sans)}
.how .how-copy p{max-width:512px;min-height:0;margin:16px 0 0;color:#f2efea;font:500 16px/24px var(--sans)}
.how .landing-image-frame{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;justify-self:start;max-width:100%;width:fit-content;height:480px;overflow:hidden;border:1px solid #ffffff14;border-radius:16px;background:transparent;box-shadow:0 25px 50px -12px #0000004d}
.how .landing-step-image{display:block;max-width:100%;width:auto;height:100%;object-fit:contain}
.how .how-card:nth-child(2) .how-copy{grid-column:2;grid-row:1;justify-self:end}
.how .how-card:nth-child(2) .landing-image-frame{grid-column:1;grid-row:1;justify-self:start}
.how .library-mockup{position:relative}
.how .mockup-brand{position:absolute;top:2%;left:3%;display:flex;align-items:center;width:22%;height:7%;padding:0 3px;background:#080c0d;color:#f2efea;font:400 27px/1.2 Georgia,serif;letter-spacing:-1px}
.worlds-heading h2{font:700 40px/1.1 var(--sans)}
.worlds{padding-bottom:70px}
.escape.wrap{position:relative;display:grid;grid-template-columns:minmax(0,.96fr) minmax(320px,.74fr);align-items:center;gap:48px;width:100%;max-width:none;min-height:0;margin:0;padding:96px 10vw;border:0;border-radius:0;background:transparent;overflow:hidden}
.escape .eyebrow{display:none}
.escape-copy{width:100%;max-width:576px}
.escape h2{margin:0;color:#faf8f4;font:700 48px/48px var(--sans);letter-spacing:normal}
.escape-copy>p:not(.eyebrow){max-width:512px;margin:20px 0 0;color:#f2efea;font:600 16px/24px var(--sans)}
.escape .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:64px;margin-top:32px;padding:0 36px;border:1px solid #ffffff1a;border-radius:999px;background:#f2efea;color:#111;font:700 18px/28px var(--sans)}
.escape .cta:hover{background:#faf8f4;transform:none}
.escape .quiz-time{display:block;margin-top:32px;color:#ffffff57;font:700 16px/24px var(--sans);letter-spacing:normal}
.escape .portal-art{position:relative;display:block;min-height:480px;height:480px;margin:0;overflow:hidden;border:1px solid #ffffff1a;border-radius:21.6px;background:#1f1f1f;box-shadow:0 25px 50px -12px #00000059}
.escape .landing-cta-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.escape .portal-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#11111105,#1111112e);pointer-events:none}
.faq{display:none}
.footer{margin-top:0;padding:32px 0;border-top:1px solid #ffffff1a;background:transparent}
.footer>.wrap{width:100%;max-width:none;margin:0;padding:0 10vw}
.footer-top{display:flex;align-items:center;gap:24px;padding:0 0 20px}
.footer-top .wordmark{font-size:32px}
.footer-top>p,.footer-top>button{display:none}
.footer-links{padding:0;border:0;color:#ffffff59;font:500 12px/20px var(--sans)}
.footer-links nav{gap:16px;flex-wrap:wrap}
.footer .company{margin-top:20px;font-size:11px}
@media(min-width:640px) and (max-width:1023px){.hero.wrap{padding:40px 24px}.how.wrap,.escape.wrap{padding:80px 24px}.how .landing-image-frame{height:352px}}
@media(max-width:1023px){
.header>.nav.wrap{padding:0 16px}
.hero.wrap{grid-template-columns:1fr;gap:32px;padding:28px 16px 40px}
.hero-copy{max-width:560px}
.hero-visual{display:block;width:100%;max-width:448px;height:432px;min-height:0;margin:0 auto;padding:0 8px}
.hero-visual .aura{background:radial-gradient(circle at 55% 45%,#7b1e2b57,transparent 272px)}
.hero-visual .ambient-book{inset:7% 11%;width:auto;height:auto;transform:rotate(-3deg);opacity:.55}
.hero-visual .cover{position:absolute;margin:0;width:45%;height:60%;border-radius:21.6px}
.hero-visual .cover-romance{left:4px;top:32px;right:auto;bottom:auto;transform:rotate(-8deg)}
.hero-visual .cover-space{left:auto;right:4px;top:20px;bottom:auto;width:48%;height:62%;transform:rotate(6deg)}
.hero-visual .cover-detective{left:9%;right:auto;top:auto;bottom:28px;width:43%;height:45%;transform:rotate(7deg)}
.hero-visual .floating-note{right:0;top:52px;padding:10px 12px;transform:rotate(3deg)}
.hero-visual .floating-note>span{font-size:20px;line-height:20px}
.hero-visual .floating-note small{font-size:9.6px;line-height:14.4px;letter-spacing:1.92px}
.hero-visual .scene-note{position:absolute;left:auto;right:0;top:auto;bottom:24px;width:57%;margin:0;padding:12px;border-radius:15.2px;transform:rotate(-4deg)}
.hero-visual .scene-note p{margin-top:8px;font-size:12px;line-height:20px}
.hero-visual .scene-note>span{margin-top:12px;font-size:10.88px;line-height:16px}
.hero-visual .scene-note button{font-size:12px;line-height:18px}
.how>.section-heading{max-width:544px;margin:0;text-align:left}
.how-grid{gap:40px}
.how .how-card{grid-template-columns:1fr;gap:24px;padding:16px 0}
.how .how-card:nth-child(2) .how-copy,.how .how-card:nth-child(2) .landing-image-frame{grid-column:auto;grid-row:auto;justify-self:start}
.how .landing-image-frame{justify-self:start}
.escape.wrap{grid-template-columns:1fr;gap:40px}
.escape .portal-art{display:block;min-height:480px;height:480px}
.footer>.wrap{padding:0 24px}
.footer-links{display:block}
.footer-links nav{margin-top:16px}
}
@media(max-width:639px){
.hero h1,.how .section-heading h2,.escape h2{font-size:37.6px;line-height:1.04;letter-spacing:normal}
.hero-underline:after{bottom:-4px}
.hero-description{font-size:15px;line-height:24px}
.hero .genre-link strong{font-size:16px;line-height:20px}
.hero .genre-link small{font-size:14px;line-height:20px}
.hero .genre-link{min-height:70px}
.hero-visual .cover-text{inset:auto 12px 12px}
.hero-visual .cover-text small{font-size:9.28px;line-height:13.92px;letter-spacing:1.4848px;padding:4px 10px}
.hero-visual .cover-text h2{font-size:14px;line-height:17.5px;margin-top:6px}
.how.wrap,.escape.wrap{padding:64px 16px}
.how-grid{margin-top:32px}
.how .how-card{padding:8px 0}
.how .how-copy h3{font-size:24px;line-height:30px}
.how .how-copy p{font-size:15px;line-height:28px}
.how .landing-image-frame{height:272px}
.how .mockup-brand{font-size:17px}
.escape-copy>p:not(.eyebrow){font-size:15px}
.escape .cta{height:56px;padding:0 28px;font-size:16px;line-height:24px}
.escape .quiz-time{font-size:14px;line-height:20px}
.escape .portal-art{min-height:352px;height:352px}
.footer>.wrap{padding:0 16px}
.footer-top{flex-wrap:wrap}
.footer-links nav{gap:12px}
}

/* Decorative layers remain within the public landing, behind its content. */
#main{position:relative;isolation:isolate;overflow:hidden;color:#f2efea;font:400 16px/24px var(--sans);background:linear-gradient(90deg,#0000004d,transparent 18%,transparent 82%,#00000052),radial-gradient(at 86% 6%,#7b1e2b2e,transparent 544px),radial-gradient(at 12% 42%,#c3a15e0e,transparent 512px),radial-gradient(at 78% 70%,#7b1e2b1f,transparent 608px),linear-gradient(#111 0%,#141111 42%,#111 100%)}
.footer{background:#111}
.hero-visual .scene-eyebrow{margin:0;color:#d0c397;font:700 10px/14px var(--sans);letter-spacing:1.3px}
@media(min-width:640px) and (max-width:1023px){.hero.wrap{padding-right:24px;padding-left:24px}}
@media(min-width:768px) and (max-width:1023px){.hero.wrap{padding-top:40px}}

/* Measured landing typography from the paired public reference. */
.hero-description{font-weight:400}.scene-note .scene-eyebrow{margin-top:0}.scene-note p{font-weight:400}