.reader-demo{position:relative;width:min(600px,98%);margin:0 auto;aspect-ratio:3/2.2;perspective:1200px;display:flex;align-items:center;justify-content:center;padding-inline:clamp(12px,4vw,28px);box-sizing:border-box;max-width:100%}.reader-demo:after{content:"";position:absolute;inset:auto clamp(10%,10vw,12%) -32px;height:clamp(26px,3.2vw,38px);border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,black 35%,transparent 65%) 0%,transparent 70%);opacity:.35;filter:blur(8px);transform:translateY(18px);pointer-events:none}.reader-demo__book{position:relative;z-index:1;width:min(520px,100%);height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,1.25vw,1.6rem);padding:clamp(1.2rem,1.6vw,1.8rem) clamp(1.4rem,2vw,2.2rem);border-radius:calc(var(--radius) + 14px);background:linear-gradient(90deg,transparent 44%,color-mix(in oklab,var(--border) 48%,transparent 52%) 48%,color-mix(in oklab,var(--border) 68%,transparent 32%) 50%,color-mix(in oklab,var(--border) 48%,transparent 52%) 52%,transparent 56%),radial-gradient(120% 100% at 50% 16%,color-mix(in oklab,var(--muted) 12%,transparent 88%) 0%,transparent 58%),linear-gradient(180deg,color-mix(in oklab,var(--surface) 78%,white 22%),color-mix(in oklab,var(--surface) 70%,white 30%) 25%,color-mix(in oklab,var(--surface) 65%,white 35%) 62%,color-mix(in oklab,var(--surface) 72%,white 28%)) padding-box;border:1px solid color-mix(in oklab,var(--border) 80%,transparent 20%);box-shadow:inset 0 2px 4px color-mix(in oklab,white 35%,transparent 65%),0 22px 42px color-mix(in oklab,black 14%,transparent 86%),0 6px 10px color-mix(in oklab,black 12%,transparent 88%);transform:rotateX(7deg) rotateY(-6deg)}.reader-demo__book:before,.reader-demo__book:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}.reader-demo__book:before{transform:translate3d(-10px,10px,-32px);background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 55%,black 12%,transparent 33%),color-mix(in oklab,var(--accent) 40%,transparent 60%));filter:blur(.35px);opacity:.85;z-index:-2}.reader-demo__book:after{inset:clamp(.28rem,.6vw,.75rem);border-radius:calc(var(--radius) + 11px);background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 62%,white 38%),color-mix(in oklab,var(--accent) 32%,white 68%),color-mix(in oklab,var(--accent) 52%,white 48%));-webkit-mask:linear-gradient(90deg,transparent 0%,black 16%,black 84%,transparent 100%);mask:linear-gradient(90deg,transparent 0%,black 16%,black 84%,transparent 100%);opacity:.36;transform:translate3d(12px,12px,-24px);z-index:-1}.reader-demo__spine{position:absolute;top:clamp(-12px,-.4vw,-8px);bottom:clamp(-26px,-2vw,-18px);left:55%;width:clamp(28px,3.5vw,38px);transform:translate3d(-50%,0,-35px);border-radius:2px;height:25rem;background:linear-gradient(90deg,color-mix(in oklab,var(--primary) 24%,black 8%,transparent 68%),color-mix(in oklab,var(--accent) 54%,var(--primary) 18%,transparent 28%) 42%,color-mix(in oklab,var(--accent) 46%,var(--primary) 16%,transparent 38%) 58%,color-mix(in oklab,var(--primary) 24%,black 8%,transparent 68%));box-shadow:0 24px 36px color-mix(in oklab,black 22%,transparent 78%),inset 0 0 12px color-mix(in oklab,black 18%,transparent 82%);opacity:.92;z-index:-3}.reader-demo__spine:before,.reader-demo__spine:after{content:"";position:absolute;left:50%;width:clamp(30px,3.6vw,40px);height:clamp(8px,1vw,10px);border-radius:4px;transform:translate(-50%);background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 62%,white 38%),color-mix(in oklab,var(--accent) 50%,white 50%));box-shadow:0 6px 10px color-mix(in oklab,black 20%,transparent 80%)}.reader-demo__spine:before{top:clamp(8px,1.4vw,14px)}.reader-demo__spine:after{bottom:clamp(8px,1.4vw,14px);background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 45%,white 55%),color-mix(in oklab,var(--accent) 58%,white 42%))}.reader-demo__bookmark{position:absolute;top:clamp(-18px,-1.4vw,-12px);right:clamp(6%,10vw,14%);width:clamp(12px,1.6vw,16px);height:clamp(42px,5.5vw,60px);border-radius:10px;background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 35%,var(--accent) 65%),color-mix(in oklab,var(--accent) 60%,var(--surface) 40%));box-shadow:0 12px 18px color-mix(in oklab,black 20%,transparent 80%);z-index:2}.reader-demo__page{position:relative;padding:clamp(1rem,1.4vw,1.4rem);border-radius:calc(var(--radius) - 4px);background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 90%,white 10%),color-mix(in oklab,var(--surface) 82%,white 18%)),repeating-linear-gradient(180deg,color-mix(in oklab,var(--muted) 10%,transparent 90%) 0,color-mix(in oklab,var(--muted) 10%,transparent 90%) 16px,transparent 16px,transparent 32px);box-shadow:inset 0 1px 1px color-mix(in oklab,white 50%,transparent 50%),inset 0 0 0 1px color-mix(in oklab,var(--border) 65%,transparent 35%),0 12px 18px color-mix(in oklab,black 12%,transparent 88%);overflow:hidden}.reader-demo__page:before,.reader-demo__page:after{content:"";position:absolute;inset:clamp(.6rem,1vw,.95rem);border-radius:calc(var(--radius) - 10px);pointer-events:none}.reader-demo__page:before{border:1px dashed color-mix(in oklab,var(--border) 50%,transparent 50%);opacity:.45}.reader-demo__page:after{inset-inline:clamp(.3rem,.8vw,.6rem);inset-block:clamp(.5rem,.8vw,.7rem);border-radius:calc(var(--radius) - 12px);background:linear-gradient(var(--page-sheen-angle, 120deg),color-mix(in oklab,white 20%,transparent 80%) 0%,transparent 55%,color-mix(in oklab,black 6%,transparent 94%) 100%);opacity:.15}.reader-demo__page--left{transform:rotateY(6deg);--page-sheen-angle: 140deg;box-shadow:inset 12px 0 18px color-mix(in oklab,var(--border) 60%,transparent 40%),inset 0 1px 1px color-mix(in oklab,white 45%,transparent 55%),inset 0 0 0 1px color-mix(in oklab,var(--border) 62%,transparent 38%),0 10px 16px color-mix(in oklab,black 12%,transparent 88%)}.reader-demo__page--right{transform:translateY(12px) rotateY(-4deg);--page-sheen-angle: 60deg;box-shadow:inset -12px 0 18px color-mix(in oklab,var(--border) 60%,transparent 40%),inset 0 1px 1px color-mix(in oklab,white 45%,transparent 55%),inset 0 0 0 1px color-mix(in oklab,var(--border) 62%,transparent 38%),0 10px 16px color-mix(in oklab,black 12%,transparent 88%)}.reader-demo__label{display:inline-flex;align-items:center;justify-content:center;padding:.35rem .75rem;border-radius:999px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;appearance:none;border:1px solid color-mix(in oklab,var(--accent) 45%,transparent 55%);background:color-mix(in oklab,var(--accent) 26%,var(--surface) 74%);color:color-mix(in oklab,var(--primary) 70%,var(--text) 30%);box-shadow:0 8px 16px color-mix(in oklab,black 12%,transparent 88%);cursor:pointer;outline:none;transition:transform .18s ease,box-shadow .18s ease}.reader-demo__label:hover,.reader-demo__label:focus-visible{transform:translateY(-1px);box-shadow:0 10px 20px color-mix(in oklab,black 14%,transparent 86%)}.reader-demo__label:focus-visible{box-shadow:0 0 0 2px color-mix(in oklab,var(--bg) 65%,transparent 35%),0 0 0 4px color-mix(in oklab,var(--primary) 55%,transparent 45%),0 8px 16px color-mix(in oklab,black 12%,transparent 88%)}.reader-demo__label:disabled,.reader-demo__label[data-state=done]{cursor:default;transform:none;box-shadow:0 6px 14px color-mix(in oklab,black 10%,transparent 90%);background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 82%,var(--muted) 18%),color-mix(in oklab,var(--surface) 78%,var(--muted) 22%)) padding-box;border-color:color-mix(in oklab,var(--muted) 45%,transparent 55%);color:color-mix(in oklab,var(--muted) 76%,var(--text) 24%);text-shadow:none}.reader-demo__copy{margin:clamp(.55rem,.6vw,.75rem) 0 0;font-size:.95rem;line-height:1.55;color:color-mix(in oklab,var(--muted) 65%,var(--text) 35%);position:relative}.reader-demo__copy-extra{white-space:pre-wrap}.reader-demo__cursor{display:inline-block;width:.6ch;margin-left:.05ch;animation:reader-demo-cursor-blink 1s steps(2,start) infinite}@keyframes reader-demo-cursor-blink{0%,49%{opacity:1}50%,to{opacity:0}}@media(max-width:900px){.reader-demo{padding-inline:clamp(10px,6vw,20px)}.reader-demo__book{transform:none}}@media(max-width:640px){.reader-demo{aspect-ratio:auto;width:min(420px,100%);padding:clamp(16px,6vw,28px);perspective:720px;gap:clamp(12px,4vw,20px)}.reader-demo:after{inset:auto clamp(8%,12vw,18%) -18px;height:clamp(20px,6vw,32px);transform:translateY(12px);opacity:.25}.reader-demo__book{width:100%;padding:clamp(1rem,4vw,1.6rem);grid-template-columns:1fr;gap:clamp(1rem,5vw,1.5rem);border-radius:calc(var(--radius) + 10px);transform:none}.reader-demo__book:before{transform:translate3d(0,8px,-28px);opacity:.55}.reader-demo__book:after{inset:clamp(.4rem,2vw,.7rem);transform:translate3d(0,10px,-22px);opacity:.28}.reader-demo__spine{display:none}.reader-demo__bookmark{right:clamp(10%,22vw,32%);top:clamp(-14px,-3vw,-10px)}.reader-demo__page{padding:clamp(.85rem,4vw,1.2rem);box-shadow:inset 0 1px 1px color-mix(in oklab,white 45%,transparent 55%),inset 0 0 0 1px color-mix(in oklab,var(--border) 58%,transparent 42%),0 10px 16px color-mix(in oklab,black 10%,transparent 90%)}.reader-demo__page:after{inset-inline:clamp(.35rem,3vw,.5rem);inset-block:clamp(.45rem,3vw,.65rem)}.reader-demo__page--left,.reader-demo__page--right{transform:none;box-shadow:inset 0 1px 1px color-mix(in oklab,white 45%,transparent 55%),inset 0 0 0 1px color-mix(in oklab,var(--border) 58%,transparent 42%),0 10px 16px color-mix(in oklab,black 10%,transparent 90%)}.reader-demo__label{font-size:clamp(.7rem,3vw,.82rem);padding:.3rem clamp(.55rem,3vw,.75rem)}.reader-demo__copy{font-size:clamp(.9rem,3.6vw,1rem);line-height:1.6}}