:root{
  --black:#060609;
  --paper:#f3f0e8;
  --pink:#f42d8d;
  --blue:#2ba7e8;
  --lime:#c8ef27;
  --accent:var(--pink);
  --page-w:clamp(340px,28vw,420px);
  --page-h:calc(var(--page-w) * 1.54545);
  --ease:cubic-bezier(.18,.82,.16,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth}
body{margin:0;min-height:100%;overflow-x:hidden;background:var(--black);color:#f5f2eb;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a{font:inherit}button{color:inherit}

.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#08080c 0%,#050507 100%)}
.halo{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform,opacity}
.halo-pink{width:38vw;height:38vw;left:7%;top:16%;background:#d61973;opacity:.075}
.halo-blue{width:52vw;height:52vw;right:-2%;top:18%;background:#123cdb;opacity:.14}
.spotlight{position:absolute;right:7%;top:8%;width:52vw;height:68vh;background:radial-gradient(ellipse at 55% 46%,rgba(99,112,255,.15),rgba(20,21,36,.05) 48%,transparent 74%);filter:blur(12px)}
.floor-light{position:absolute;left:50%;bottom:3%;width:min(70vw,1080px);height:22vh;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(34,38,74,.33),rgba(5,5,8,.04) 52%,transparent 76%);filter:blur(24px)}
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.022;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

.chrome{position:fixed;z-index:60;top:0;left:0;right:0;height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 54px;pointer-events:none}
.chrome>*{pointer-events:auto}
.identity{justify-self:start;color:#fff;text-decoration:none;display:flex;align-items:baseline;gap:14px}
.identity span{font-weight:800;letter-spacing:-.06em;font-size:21px;color:var(--pink)}
.identity small,.chapter-lockup small,.chapter-lockup strong,.text-button,.buy-button{font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.2em}
.identity small{color:rgba(255,255,255,.34)}
.chapter-lockup{justify-self:center;text-align:center;display:flex;flex-direction:column;gap:7px;opacity:0;transform:translateY(-5px);transition:opacity .5s ease,transform .65s var(--ease)}
body.reading .chapter-lockup{opacity:1;transform:none}
.chapter-lockup small{color:var(--accent)}
.chapter-lockup strong{font-weight:500;color:rgba(255,255,255,.7)}
.chrome-actions{justify-self:end;display:flex;align-items:center;gap:27px}
.text-button{border:0;background:none;color:rgba(255,255,255,.45);cursor:pointer;padding:12px 0;transition:color .25s ease}
.text-button:hover{color:#fff}
.buy-button{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:13px 19px;opacity:0;transform:translateY(-5px);transition:opacity .5s ease,transform .65s var(--ease),border-color .25s ease,color .25s ease}
body.reading .buy-button{opacity:1;transform:none}
.buy-button:hover{border-color:var(--accent);color:var(--accent)}

.experience{position:fixed;inset:0;z-index:10;pointer-events:none}
.cinema{position:absolute;inset:0;display:grid;place-items:center;perspective:2400px;transform-style:preserve-3d}
.hero-copy{position:absolute;z-index:22;left:7.2vw;top:50%;width:min(34vw,470px);transform:translateY(-47%);pointer-events:none;will-change:opacity,transform}
.hero-copy p{margin:0 0 24px;font-size:9px;line-height:1.4;letter-spacing:.25em;color:var(--pink)}
.hero-copy h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(42px,4.7vw,72px);line-height:1.02;letter-spacing:-.055em;color:#f3efe7;text-wrap:balance}
.hero-copy strong{display:block;margin-top:13px;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(42px,4.7vw,72px);line-height:1.02;letter-spacing:-.055em;background:linear-gradient(90deg,var(--lime),var(--blue) 48%,var(--pink) 86%);-webkit-background-clip:text;background-clip:text;color:transparent}

.book-rig{position:absolute;z-index:12;width:var(--page-w);height:var(--page-h);transform-style:preserve-3d;transform-origin:50% 53%;will-change:transform,opacity;pointer-events:auto}
.closed-book{position:absolute;inset:0;transform-style:preserve-3d;filter:drop-shadow(0 38px 46px rgba(0,0,0,.5))}
.book-rig::after{content:"";position:absolute;z-index:-8;left:-15%;right:-15%;bottom:-8%;height:12%;border-radius:50%;background:rgba(0,0,0,.58);filter:blur(24px);transform:rotateX(68deg);opacity:.72}
.back-board,.page-block,.opening-right,.front-board{position:absolute;inset:0;border-radius:4px 9px 9px 4px;transform-style:preserve-3d}
.back-board{z-index:1;transform:translateZ(-14px);overflow:hidden;background:#11131f;box-shadow:0 26px 65px rgba(0,0,0,.48)}
.back-board img{width:100%;height:100%;display:block;object-fit:fill;filter:saturate(.94) contrast(1.015)}
.page-block{z-index:3;transform:translateZ(-4px);background:#ece5d8;box-shadow:7px 9px 20px rgba(0,0,0,.34),inset -12px 0 13px rgba(77,57,34,.08)}
.page-block::before{content:"";position:absolute;inset:3px 3px 3px 5px;border-radius:3px 8px 8px 3px;background:repeating-linear-gradient(0deg,#f6f1e8 0 2px,#ddd4c5 2px 3px);opacity:.82}
.page-edge{position:absolute;display:block;background:repeating-linear-gradient(0deg,#f6f0e5 0 2px,#d8cebd 2px 3px);box-shadow:inset 0 0 8px rgba(75,53,27,.1)}
.page-edge-fore{right:-12px;top:7px;width:13px;height:calc(100% - 15px);transform:rotateY(90deg);transform-origin:left center;border-radius:0 5px 5px 0}
.page-edge-bottom{left:7px;bottom:-11px;width:calc(100% - 15px);height:12px;transform:rotateX(90deg);transform-origin:center top}
.page-edge-top{left:7px;top:-7px;width:calc(100% - 15px);height:8px;transform:rotateX(90deg);transform-origin:center bottom;opacity:.48}
.opening-right{z-index:5;overflow:hidden;background:var(--paper);box-shadow:0 12px 34px rgba(0,0,0,.26)}
.opening-right img,.inside-face img{width:100%;height:100%;display:block;object-fit:contain;background:var(--paper)}
.opening-lustre,.inside-lustre{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}
.opening-lustre{background:linear-gradient(90deg,rgba(43,29,13,.13),transparent 27%,rgba(255,255,255,.04))}
.front-board{z-index:8;transform-origin:0 50%;transform:translateZ(9px);will-change:transform;box-shadow:13px 23px 48px rgba(0,0,0,.42)}
.front-face,.inside-face{position:absolute;inset:0;overflow:hidden;border-radius:4px 9px 9px 4px;backface-visibility:hidden;background:#0d0e14}
.front-face img{width:100%;height:100%;display:block;object-fit:fill}
.cover-shade{position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.075),transparent 19%,transparent 72%,rgba(0,0,0,.26));mix-blend-mode:soft-light}
.cover-glint{position:absolute;inset:-22%;background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.34) 48%,transparent 60%);transform:translateX(-120%);mix-blend-mode:screen;opacity:0}
.inside-face{transform:rotateY(180deg);background:var(--paper);box-shadow:inset -17px 0 24px rgba(48,38,24,.1)}
.inside-lustre{background:linear-gradient(90deg,rgba(255,255,255,.07),transparent 72%,rgba(40,27,13,.12))}

.reader{position:absolute;z-index:15;width:calc(var(--page-w) * 2 + 2px);height:var(--page-h);opacity:0;visibility:hidden;transform-style:preserve-3d;transform-origin:50% 53%;will-change:transform,opacity;pointer-events:auto}
.reader.is-visible{visibility:visible}
.book-shadow{position:absolute;z-index:-4;left:3%;right:3%;bottom:-9%;height:16%;border-radius:50%;background:rgba(0,0,0,.78);filter:blur(35px)}
.under-cover{position:absolute;top:7px;bottom:-8px;width:50%;background:linear-gradient(180deg,#141726,#172450 66%,#203d94);border-radius:7px;box-shadow:0 20px 50px rgba(0,0,0,.46)}
.under-cover-left{left:-7px;transform:rotateZ(-.8deg)}
.under-cover-right{right:-7px;transform:rotateZ(.8deg)}
.spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 2px 1fr;transform-style:preserve-3d}
.page{position:relative;overflow:hidden;background:var(--paper);backface-visibility:hidden;transform-style:preserve-3d;box-shadow:0 12px 34px rgba(0,0,0,.25),0 29px 66px rgba(0,0,0,.3)}
.page-left{border-radius:9px 2px 2px 11px;transform-origin:right center;transform:rotateY(1deg)}
.page-right{border-radius:2px 9px 11px 2px;transform-origin:left center;transform:rotateY(-1deg)}
.page>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:var(--paper);filter:none}
.page::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;box-shadow:inset 0 0 22px rgba(45,35,23,.065)}
.page-lustre{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:multiply}
.page-left .page-lustre{background:linear-gradient(90deg,rgba(255,255,255,.07),transparent 72%,rgba(35,24,13,.11))}
.page-right .page-lustre{background:linear-gradient(90deg,rgba(35,24,13,.12),transparent 28%,rgba(255,255,255,.035))}
.gutter{position:relative;z-index:12;background:rgba(20,14,9,.34);box-shadow:-15px 0 28px 9px rgba(0,0,0,.1),15px 0 28px 9px rgba(0,0,0,.09)}

.highlights{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:multiply}
.mark{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:rotate(var(--r));transform-origin:left center;opacity:.9;filter:saturate(.94)}
.mark::before{content:"";position:absolute;inset:0;width:0;border-radius:2px 6px 3px 5px;background:linear-gradient(90deg,color-mix(in srgb,var(--mark) 65%,transparent),color-mix(in srgb,var(--mark) 38%,transparent) 86%,transparent);clip-path:polygon(0 13%,98% 0,100% 78%,2% 100%);transition:width 1.05s cubic-bezier(.18,.84,.2,1) var(--delay)}
.mark::after{content:"";position:absolute;top:-24%;bottom:-24%;left:-1px;width:2px;background:var(--mark);filter:blur(.5px);opacity:0;transition:left 1.05s cubic-bezier(.18,.84,.2,1) var(--delay),opacity .2s ease var(--delay)}
.highlights.is-live .mark::before{width:100%}
.highlights.is-live .mark::after{left:99%;opacity:.48}

.turning-sheet{position:absolute;z-index:25;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;display:none;visibility:hidden}
.turning-sheet.backward{left:0;transform-origin:100% 50%}
.turning-sheet.is-turning{display:block;visibility:visible}
.sheet-face{position:absolute;inset:0;overflow:hidden;background:var(--paper);backface-visibility:hidden;box-shadow:0 15px 38px rgba(0,0,0,.27)}
.sheet-face img{width:100%;height:100%;display:block;object-fit:contain;background:var(--paper)}
.sheet-back{transform:rotateY(180deg)}
.curl-light,.curl-shadow{position:absolute;inset:0;pointer-events:none;backface-visibility:hidden}
.curl-light{background:linear-gradient(90deg,transparent 12%,rgba(255,255,255,.4) 48%,transparent 76%);mix-blend-mode:screen;opacity:0}
.curl-shadow{background:radial-gradient(ellipse at 0% 50%,rgba(0,0,0,.31),transparent 48%);opacity:0}
.final-buy-link{position:absolute;z-index:12;left:12%;width:58%;top:56%;height:8%;display:none}
body.final-scene .final-buy-link{display:block}
body.final-scene .page,body.final-scene .page>img,body.final-scene .sheet-face,body.final-scene .sheet-face img{background:var(--paper)}

.nav-arrow{position:absolute;z-index:40;top:50%;width:42px;height:42px;margin-top:-21px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(8,8,11,.25);backdrop-filter:blur(10px);color:rgba(255,255,255,.52);opacity:0;visibility:hidden;cursor:pointer;transition:.28s ease;pointer-events:auto}
body.reading .nav-arrow{opacity:1;visibility:visible}
.nav-arrow:hover{color:#fff;border-color:var(--accent);transform:scale(1.04)}
.nav-prev{left:42px}.nav-next{right:42px}
.page-tabs{position:absolute;z-index:42;right:22px;top:50%;display:flex;flex-direction:column;gap:4px;transform:translateY(-50%);opacity:0;visibility:hidden;transition:.5s ease;pointer-events:auto}
body.reading .page-tabs{opacity:1;visibility:visible}
.page-tab{position:relative;width:7px;height:27px;border:0;border-radius:2px 0 0 2px;background:rgba(255,255,255,.09);padding:0;cursor:pointer;transition:width .24s ease,background .24s ease}
.page-tab::after{content:attr(data-title);position:absolute;right:17px;top:50%;transform:translateY(-50%) translateX(7px);white-space:nowrap;opacity:0;padding:6px 9px;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(5,5,8,.88);backdrop-filter:blur(12px);font-size:8px;text-transform:uppercase;letter-spacing:.17em;color:rgba(255,255,255,.65);transition:.22s ease;pointer-events:none}
.page-tab:hover{width:13px;background:var(--accent)}
.page-tab:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.page-tab.active{width:15px;background:var(--accent);box-shadow:0 0 15px color-mix(in srgb,var(--accent) 30%,transparent)}
.reader-footer{position:absolute;z-index:35;left:50%;bottom:23px;width:min(48vw,680px);transform:translateX(-50%) translateY(7px);display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;opacity:0;transition:.45s ease;font-size:8px;letter-spacing:.18em;color:rgba(255,255,255,.4)}
body.reading .reader-footer{opacity:1;transform:translateX(-50%) translateY(0)}
.timeline{height:1px;background:rgba(255,255,255,.13);overflow:hidden}.timeline i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--lime),var(--blue),var(--pink));transition:width .7s var(--ease)}
.scroll-instruction{position:absolute;z-index:30;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:13px;font-size:8px;text-transform:uppercase;letter-spacing:.23em;color:rgba(255,255,255,.44);transition:opacity .3s ease}
.scroll-instruction i{width:42px;height:1px;background:linear-gradient(90deg,var(--lime),var(--blue),var(--pink));transform-origin:left;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scaleX(.3);opacity:.35}50%{transform:scaleX(1);opacity:1}}

.scroll-story{position:relative;z-index:2;pointer-events:none}
.intro-space{height:270vh}
.beat{height:118vh}

.index-panel{position:fixed;inset:0;z-index:90;visibility:hidden;opacity:0;transition:opacity .42s ease,visibility 0s linear .42s}
.index-panel.open{visibility:visible;opacity:1;transition:opacity .42s ease,visibility 0s}
.index-backdrop{position:absolute;inset:0;background:rgba(3,3,5,.78);backdrop-filter:blur(18px)}
.index-sheet{position:absolute;right:0;top:0;bottom:0;width:min(560px,88vw);padding:100px 64px 50px;background:linear-gradient(145deg,rgba(16,16,21,.98),rgba(8,8,11,.99));border-left:1px solid rgba(255,255,255,.09);overflow:auto;transform:translateX(22px);transition:transform .52s var(--ease)}
.index-panel.open .index-sheet{transform:none}
.index-close{position:absolute;right:34px;top:30px;border:0;background:none;color:rgba(255,255,255,.55);font-size:9px;text-transform:uppercase;letter-spacing:.18em;cursor:pointer}
.index-sheet>p{margin:0 0 18px;color:var(--pink);font-size:9px;text-transform:uppercase;letter-spacing:.2em}
.index-sheet h1{margin:0 0 50px;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-.045em}
.index-sheet ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.09)}
.index-sheet li{border-bottom:1px solid rgba(255,255,255,.08)}
.index-sheet li button{width:100%;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:18px 0;border:0;background:none;text-align:left;cursor:pointer;color:#fff}
.index-sheet li span{font-size:9px;color:var(--accent);letter-spacing:.16em}.index-sheet li strong{font-size:13px;font-weight:500}.index-sheet li em{font-style:normal;font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.34)}
.index-sheet li button:hover strong{color:var(--accent)}

@media (max-width:1100px){
  :root{--page-w:clamp(320px,34vw,380px)}
  .chrome{padding:0 34px}
  .hero-copy{left:5vw;width:min(35vw,390px)}
  .hero-copy h1,.hero-copy strong{font-size:clamp(35px,4.8vw,58px)}
  .nav-prev{left:22px}.nav-next{right:22px}
}
@media (max-width:760px){
  :root{--page-w:min(72vw,360px);--page-h:calc(var(--page-w) * 1.54545)}
  .chrome{height:68px;padding:0 18px;grid-template-columns:1fr auto}.chapter-lockup{display:none}.chrome-actions{gap:14px}.buy-button{display:none}.identity small{display:none}.identity span{font-size:18px}.text-button{font-size:8px}
  .hero-copy{left:20px;right:20px;top:auto;bottom:93px;width:auto;transform:none}
  .hero-copy p{margin-bottom:12px;font-size:8px}.hero-copy h1,.hero-copy strong{font-size:clamp(28px,8.6vw,40px);line-height:1.03}.hero-copy strong{margin-top:7px}
  .reader{width:var(--page-w)}.spread{grid-template-columns:1fr}.page-left,.gutter,.under-cover-left{display:none}.page-right{grid-column:1;border-radius:7px;transform:none}.under-cover-right{width:100%;right:-6px}
  .turning-sheet{left:0;width:100%;transform-origin:0 50%}.turning-sheet.backward{left:0;transform-origin:100% 50%}
  .nav-arrow{width:38px;height:38px}.nav-prev{left:8px}.nav-next{right:8px}.page-tabs{display:none}.reader-footer{bottom:17px;width:56vw}.scroll-instruction{bottom:25px}
  .index-sheet{padding:88px 28px 40px}.index-sheet li button{grid-template-columns:32px 1fr}.index-sheet li em{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-instruction i{animation:none}.cover-glint{display:none}}