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