.book-demo{width:min(1440px,calc(100% - 32px))!important}.book-demo-header{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:start;gap:32px;margin-bottom:36px}.book-demo-header .back{margin:10px 0}.book-demo-header h1{max-width:880px}.book-demo-header p{max-width:700px}.reader-stage{padding:clamp(24px,5vw,64px);overflow:hidden;background:var(--white)}.reader-intro{display:grid;grid-template-columns:1fr minmax(280px,520px);align-items:end;gap:40px;margin-bottom:35px}.reader-intro h2{margin:5px 0;font-size:clamp(34px,5vw,64px);line-height:1}.reader-intro>p{color:var(--muted)}.book-reader{position:relative;width:min(100%,1040px);aspect-ratio:1.42;margin:auto;perspective:2400px;filter:drop-shadow(0 30px 35px #1115);touch-action:pan-y}.book-reader:after{position:absolute;z-index:20;top:2%;bottom:2%;left:50%;width:2px;content:"";background:linear-gradient(#0000,#0004 12%,#0005 88%,#0000);transform:translateX(-1px);pointer-events:none}.book-underlay{position:absolute;top:0;width:50%;height:100%;padding:clamp(22px,4vw,50px);border:1px solid #2d2f2a;background:#171815;color:#f4f0e7}.book-underlay-left{left:0;display:grid;place-items:start;align-content:space-between}.book-underlay-left span{display:grid;width:52px;aspect-ratio:1;place-items:center;border:1px solid;border-radius:50%;font-weight:800}.book-underlay-left strong{max-width:300px;font:750 clamp(26px,4vw,55px)/.92 Bricolage}.book-underlay-left small{font:9px Plex;text-transform:uppercase}.book-underlay-right{right:0;display:grid;align-content:center;gap:18px;background:#252722}.book-underlay-right span{color:#d57d62;font:700 9px Plex;text-transform:uppercase}.book-underlay-right strong{font:700 clamp(25px,3.5vw,48px)/1 Bricolage}.book-underlay-right a{color:#f4f0e7;font-weight:800}.book-leaf{position:absolute;z-index:calc(10 - var(--leaf));top:0;right:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;transition:transform .75s cubic-bezier(.65,.02,.28,1)}.book-leaf.flipped{z-index:calc(2 + var(--leaf));transform:rotateY(-180deg)}.book-page{position:absolute;inset:0;margin:0;overflow:hidden;border:1px solid #c7c1b5;background:#fff;backface-visibility:hidden}.book-page img{width:100%;height:100%;object-fit:cover;user-select:none}.book-front{box-shadow:inset 22px 0 28px #17181512}.book-back{box-shadow:inset -22px 0 28px #17181512;transform:rotateY(180deg)}.book-page figcaption{position:absolute;right:12px;bottom:10px;padding:4px 7px;border-radius:2px;background:#fffdfae8;color:#333;font:7px Plex;text-transform:uppercase}.reader-controls{display:grid;grid-template-columns:auto minmax(180px,360px) auto;align-items:center;justify-content:center;gap:22px;margin-top:32px}.reader-controls p{display:grid;gap:8px;margin:0;color:var(--muted);font:700 9px Plex;text-align:center;text-transform:uppercase}.reader-controls i{height:3px;background:var(--line)}.reader-controls i b{display:block;width:16.66%;height:100%;background:var(--rust);transition:width .3s}.book-method{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(40px,7vw,100px);margin-top:18px;padding:clamp(28px,6vw,68px)}.book-method h2{max-width:560px;margin:6px 0;font-size:clamp(38px,5vw,66px);line-height:1}.method-pair{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}.method-pair article{padding:clamp(22px,4vw,38px)}.method-pair article+article{border-left:1px solid var(--line)}.method-pair span{color:var(--rust);font:700 9px Plex;text-transform:uppercase}.method-pair h3{font-size:28px;line-height:1}.method-pair p{color:var(--muted)}
[data-theme=dark] .book-reader{filter:drop-shadow(0 30px 35px #000a)}[data-theme=dark] .reader-stage,[data-theme=dark] .book-method{background:var(--white)}
@media(max-width:850px){.book-demo-header{grid-template-columns:1fr}.book-demo-header>.button{justify-self:start}.reader-intro,.book-method{grid-template-columns:1fr}.book-reader{width:min(100%,520px);aspect-ratio:.707}.book-reader:after{display:none}.book-underlay{width:100%}.book-underlay-left{display:none}.book-underlay-right{left:0}.book-leaf{right:0;width:100%;transform-origin:left}.book-back{transform:rotateY(180deg)}.reader-controls{grid-template-columns:1fr 1fr}.reader-controls p{grid-row:2;grid-column:1/-1}.method-pair{max-width:720px}}@media(max-width:520px){.book-demo{width:min(100% - 16px,1440px)!important}.reader-stage{padding:20px 10px}.reader-controls{gap:8px}.reader-controls button{padding:0 11px}.book-method{padding:28px 18px}.method-pair{grid-template-columns:1fr}.method-pair article+article{border-top:1px solid var(--line);border-left:0}}
@media(prefers-reduced-motion:reduce){.book-leaf{transition-duration:.01ms}}