.binder-page{--pocket-ink:color-mix(in oklch, var(--foreground) 42%, transparent);--empty-ink:color-mix(in oklch, var(--foreground) 20%, transparent);--page:var(--card);background:var(--page);box-shadow:inset 0 0 0 3px color-mix(in oklch, var(--page) 72%, black), 0 12px 24px -12px #000000bf;position:relative}@supports (color:lab(0% 0 0)){.binder-page{box-shadow:inset 0 0 0 3px color-mix(in oklch, var(--page) 72%, black), 0 12px 24px -12px lab(0% 0 0/.75)}}.binder-page[data-colored]{--pocket-ink:#00000080;--empty-ink:#00000047;--page:var(--binder)}@supports (color:lab(0% 0 0)){.binder-page[data-colored]{--pocket-ink:lab(0% 0 0/.5);--empty-ink:lab(0% 0 0/.28)}}.binder-page:after{content:"";border:2px dashed var(--pocket-ink);pointer-events:none;border-radius:calc(1rem - 8px);position:absolute;inset:8px}.binder-pocket{outline:2.5px dashed var(--pocket-ink);outline-offset:3px}.binder-empty{color:var(--empty-ink)}.binder-ring{border:3px solid var(--foreground);background:var(--background);border-radius:999px;box-shadow:0 2px #0006;box-shadow:0 2px lab(0% 0 0/.4)}@keyframes binder-turn{0%{opacity:0;translate:calc(var(--turn-dir) * 2.5rem) 0}}.binder-turn-next{--turn-dir:1;animation:.32s cubic-bezier(.2,.8,.2,1) binder-turn}.binder-turn-prev{--turn-dir:-1;animation:.32s cubic-bezier(.2,.8,.2,1) binder-turn}