:root {
  --library-blue: #2447ff;
  --library-paper: #f1eee6;
  --library-ink: #101010;
  --library-muted: #77756f;
  --library-line: rgba(16,16,16,.22);
  --library-gutter: clamp(24px,5.8vw,112px);
}

.library-theme { --accent: #a9ff2f; background: #000; color: var(--library-ink); }
.library-theme .page-loader::after { background: linear-gradient(transparent,rgba(36,71,255,.92),transparent); }
.library-theme .page-loader__brand span,
.library-theme .page-loader__progress::after { color: #6c82ff; }
.library-theme .page-loader__kicker i,
.library-theme .page-loader__meter span { background: #6c82ff; box-shadow: 0 0 18px rgba(108,130,255,.64); }
.library-page { overflow: hidden; border-radius: 0 0 30px 30px; background: var(--library-paper); }

.library-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(130px,12vw,200px) var(--library-gutter) clamp(96px,9vw,150px);
  overflow: hidden;
  background: var(--library-paper);
}
.library-hero::before { position: absolute; top: 12%; right: -8vw; width: clamp(240px,30vw,560px); aspect-ratio: 1; border: clamp(35px,5vw,96px) solid var(--library-blue); border-radius: 50%; content: ""; rotate: calc(var(--library-scroll,0) * .035deg); opacity: .96; }
.library-hero::after { position: absolute; top: 0; bottom: 0; left: 40%; width: 1px; background: rgba(16,16,16,.1); content: ""; }
.library-hero__meta { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto auto; gap: 32px; padding-bottom: 13px; border-bottom: 1px solid var(--library-line); color: var(--library-muted); font-size: 8px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.library-hero__eyebrow { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin: clamp(24px,3vw,46px) 0 0; font-size: 9px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.library-hero__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--library-blue); box-shadow: 0 0 0 5px rgba(36,71,255,.1); }
.library-hero__title { position: relative; z-index: 1; margin: clamp(30px,4vw,70px) 0 0; color: var(--library-ink); font-size: clamp(84px,16.2vw,310px); font-weight: 700; line-height: .72; letter-spacing: -.095em; text-transform: uppercase; translate: 0 calc(var(--library-scroll,0) * -.055px); }
.library-hero__title span { color: var(--library-blue); font-family: var(--font-serif); font-weight: 400; letter-spacing: -.12em; }
.library-hero__intro { position: absolute; z-index: 2; right: var(--library-gutter); bottom: clamp(96px,10vw,165px); width: min(420px,32vw); margin: 0; font-size: clamp(15px,1.25vw,20px); line-height: 1.55; }
.library-hero__stamp { position: absolute; z-index: 2; left: var(--library-gutter); bottom: clamp(90px,9vw,145px); display: grid; place-items: center; width: clamp(88px,9vw,150px); aspect-ratio: 1; border: 1px solid var(--library-ink); border-radius: 50%; rotate: calc(-10deg + var(--library-scroll,0) * .02deg); font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.library-hero__stamp i { font-size: 19px; font-style: normal; line-height: .6; }
.library-hero__ticker { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; width: max-content; overflow: hidden; border-top: 1px solid var(--library-ink); background: var(--library-blue); color: #fff; font-size: 10px; font-weight: 650; line-height: 36px; letter-spacing: .13em; white-space: nowrap; }
.library-hero__ticker span { animation: library-ticker 24s linear infinite; }
@keyframes library-ticker { to { translate: -100% 0; } }

.library-feature { position: relative; z-index: 1; padding: clamp(90px,10vw,180px) var(--library-gutter); border-radius: 30px 30px 0 0; background: #fbfaf6; }
.library-section-head { display: grid; grid-template-columns: .58fr 1.42fr; gap: 40px; padding-bottom: clamp(52px,7vw,110px); border-bottom: 1px solid var(--library-line); }
.library-section-head > p,
.library-future__head > p { margin: 0; color: var(--library-muted); font-size: 9px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.library-section-head h2,
.library-future__head h2 { margin: 0; font-size: clamp(54px,7.6vw,144px); font-weight: 650; line-height: .82; letter-spacing: -.078em; text-transform: uppercase; }
.library-section-head h2 em { color: var(--library-blue); font-family: var(--font-serif); font-weight: 400; text-transform: none; }
.library-book { display: grid; grid-template-columns: minmax(320px,.85fr) minmax(0,1.15fr); gap: clamp(40px,8vw,150px); padding: clamp(54px,8vw,130px) 0; border-bottom: 1px solid var(--library-line); }
.library-book__cover { position: relative; display: flex; flex-direction: column; width: min(100%,620px); aspect-ratio: .76; padding: clamp(26px,3.2vw,52px); overflow: hidden; background: var(--library-blue); color: #fff; isolation: isolate; }
.library-book__cover::before { position: absolute; inset: 11% -34% auto auto; z-index: -1; width: 82%; aspect-ratio: 1; border: clamp(28px,4vw,70px) solid var(--accent); border-radius: 50%; content: ""; transition: translate .65s cubic-bezier(.16,1,.3,1),rotate .65s cubic-bezier(.16,1,.3,1); }
.library-book__cover:hover::before { translate: -12px 10px; rotate: -9deg; }
.library-book__edition { font-size: 8px; font-weight: 650; letter-spacing: .14em; }
.library-book__cover strong { margin-top: auto; font-size: clamp(126px,16vw,290px); line-height: .62; letter-spacing: -.11em; }
.library-book__cover b { font-size: clamp(48px,6.5vw,120px); font-weight: 650; line-height: .8; letter-spacing: -.07em; }
.library-book__cover p { margin: clamp(26px,3vw,50px) 0 0; font-size: 8px; line-height: 1.65; letter-spacing: .13em; }
.library-book__cover > i { position: absolute; right: clamp(26px,3.2vw,52px); bottom: clamp(26px,3.2vw,52px); font-size: 11px; font-style: normal; font-weight: 700; }
.library-book__copy { display: flex; flex-direction: column; justify-content: center; }
.library-book__meta { display: flex; gap: 9px; flex-wrap: wrap; }
.library-book__meta span { padding: 7px 10px; border: 1px solid var(--library-line); border-radius: 999px; color: var(--library-muted); font-size: 8px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.library-book__copy h3 { margin: clamp(68px,8vw,126px) 0 26px; font-size: clamp(72px,9.2vw,172px); line-height: .76; letter-spacing: -.085em; }
.library-book__copy > p { max-width: 620px; margin: 0; color: #5e5c57; font-size: clamp(15px,1.22vw,19px); line-height: 1.72; }
.library-book__cta { display: flex; align-items: center; justify-content: space-between; width: min(100%,620px); margin-top: clamp(54px,6vw,96px); padding: 20px 0; border-top: 1px solid var(--library-ink); border-bottom: 1px solid var(--library-ink); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: padding .35s ease,color .35s ease; }
.library-book__cta:hover { padding-inline: 14px; color: var(--library-blue); }
.library-book__cta i { color: var(--library-blue); font-size: 18px; font-style: normal; }

.library-contents { display: grid; grid-template-columns: .58fr 1.42fr; gap: 40px; padding-top: clamp(80px,9vw,150px); }
.library-contents__intro p { margin: 0 0 14px; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.library-contents__intro span { display: block; max-width: 250px; color: var(--library-muted); font-size: 12px; line-height: 1.5; }
.library-chapters { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--library-line); }
.library-chapters li { border-bottom: 1px solid var(--library-line); }
.library-chapters a { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 20px; min-height: clamp(100px,9vw,150px); padding: 12px 0; transition: padding .38s cubic-bezier(.16,1,.3,1),color .28s ease,background .28s ease; }
.library-chapters a:hover { padding-inline: 18px; background: var(--library-blue); color: #fff; }
.library-chapters a > span { color: var(--library-blue); font-size: 9px; font-weight: 700; }
.library-chapters a:hover > span { color: var(--accent); }
.library-chapters h3 { margin: 0; font-size: clamp(23px,2.7vw,50px); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; }
.library-chapters i { color: var(--library-muted); font-size: 8px; font-style: normal; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.library-chapters a:hover i { color: rgba(255,255,255,.7); }
.library-contents__all { grid-column: 2; display: flex; justify-content: space-between; margin-top: 22px; padding: 18px 0; border-bottom: 1px solid var(--library-ink); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.library-contents__all span { color: var(--library-blue); font-size: 16px; }

.library-future { padding: clamp(100px,11vw,190px) var(--library-gutter); background: var(--library-ink); color: #fff; }
.library-future__head { display: grid; grid-template-columns: .58fr 1.42fr; gap: 40px; padding-bottom: clamp(64px,8vw,130px); border-bottom: 1px solid rgba(255,255,255,.2); }
.library-future__head > p { color: rgba(255,255,255,.44); }
.library-future__head h2 em { color: var(--accent); font-family: var(--font-serif); font-weight: 400; text-transform: none; }
.library-future__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding-top: clamp(54px,7vw,108px); }
.library-future__card { display: flex; flex-direction: column; min-height: clamp(340px,34vw,590px); padding: clamp(24px,3vw,46px); border: 1px solid rgba(255,255,255,.22); transition: background .35s ease,color .35s ease,translate .45s cubic-bezier(.16,1,.3,1); }
.library-future__card:hover { background: var(--library-blue); translate: 0 -6px; }
.library-future__card > span { padding-bottom: 16px; border-bottom: 1px solid currentColor; color: rgba(255,255,255,.44); font-size: 8px; font-weight: 650; letter-spacing: .13em; }
.library-future__card strong { margin: auto 0 22px; font-size: clamp(38px,4.4vw,78px); font-weight: 600; line-height: .86; letter-spacing: -.065em; }
.library-future__card p { max-width: 360px; margin: 0 0 44px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.55; }
.library-future__card > i { color: var(--accent); font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.library-footer__note { margin: 0; text-align: right; }

.library-reveal { opacity: 0; translate: 0 48px; clip-path: inset(0 0 12% 0); transition: opacity .8s ease,translate 1s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.16,1,.3,1); }
.library-reveal.is-visible { opacity: 1; translate: 0 0; clip-path: inset(0); }

@media (max-width: 900px) {
  .library-hero::after { left: 50%; }
  .library-hero__intro { width: min(400px,42vw); }
  .library-book { grid-template-columns: minmax(270px,.8fr) 1.2fr; gap: 48px; }
  .library-future__grid { grid-template-columns: 1fr; }
  .library-future__card { min-height: 390px; }
}

@media (max-width: 700px) {
  :root { --library-gutter: 20px; }
  .library-page { border-radius: 0 0 20px 20px; }
  .library-hero { min-height: 92vh; padding-top: 112px; }
  .library-hero::before { top: 25%; right: -40vw; width: 94vw; border-width: 48px; opacity: .82; }
  .library-hero::after { display: none; }
  .library-hero__meta { grid-template-columns: 1fr auto; }
  .library-hero__meta span:nth-child(2) { display: none; }
  .library-hero__title { margin-top: 56px; font-size: clamp(76px,23vw,120px); }
  .library-hero__intro { left: 20px; right: auto; bottom: 100px; width: calc(100% - 40px); max-width: 330px; }
  .library-hero__stamp { display: none; }
  .library-section-head,.library-future__head,.library-contents { grid-template-columns: 1fr; }
  .library-section-head h2,.library-future__head h2 { margin-top: 26px; }
  .library-book { grid-template-columns: 1fr; }
  .library-book__cover { width: 100%; }
  .library-book__copy h3 { margin-top: 62px; }
  .library-contents__intro span { max-width: 100%; }
  .library-chapters { margin-top: 28px; }
  .library-chapters a { grid-template-columns: 32px 1fr; }
  .library-chapters i { display: none; }
  .library-contents__all { grid-column: 1; }
  .library-footer__note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .library-hero__ticker span { animation: none; }
  .library-reveal { opacity: 1 !important; translate: none !important; clip-path: none !important; transition: none !important; }
  .library-hero__title { translate: none !important; }
}