.pe-card{background-color:var(--color-earth-700);background-image:radial-gradient(120% 140% at 10% 0%, color-mix(in srgb, var(--color-white) 10%, transparent), transparent 60%);width:100%;height:auto;color:var(--color-earth-100);text-align:left;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-white) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--color-black) 12%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--color-earth-900) 60%, transparent);border-radius:16px;justify-content:flex-start;align-items:center;gap:14px;padding:12px 18px 12px 14px;transition-property:scale,box-shadow;transition-duration:.15s;transition-timing-function:ease-out;display:flex;position:relative}.pe-card:active{scale:.96}.pe-card:focus-visible{outline:2px solid var(--color-earth-500);outline-offset:2px}.pe-rule{border:1px solid color-mix(in srgb, var(--color-earth-300) 30%, transparent);pointer-events:none;border-radius:11px;position:absolute;inset:5px}.pe-book{perspective:240px;flex-shrink:0;width:42px;height:56px;position:relative}.pe-page{background:var(--color-stone-50);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-black) 8%, transparent);border-radius:2px 5px 5px 2px;position:absolute;inset:2px 0 2px 2px}.pe-page-line{background:var(--color-stone-200);border-radius:1px;height:2px;position:absolute;left:9px;right:6px}.pe-cover{background-color:var(--color-earth-800);background-image:linear-gradient(90deg, color-mix(in srgb, var(--color-black) 35%, transparent), transparent 6px);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-white) 10%, transparent), 2px 2px 6px color-mix(in srgb, var(--color-black) 30%, transparent);transform-origin:0;border-radius:2px 5px 5px 2px;place-items:center;transition:transform .3s cubic-bezier(.2,0,0,1);display:grid;position:absolute;inset:0;transform:rotateY(-24deg)}.pe-globe{stroke:var(--color-earth-300)}.pe-chevron{color:var(--color-earth-300);flex-shrink:0;transition:translate .3s cubic-bezier(.2,0,0,1)}@media (hover:hover){.pe-card:hover .pe-cover{transform:rotateY(-50deg)}.pe-card:hover .pe-chevron{translate:3px}}.pe-card:active .pe-cover,.pe-card:focus-visible .pe-cover{transform:rotateY(-50deg)}@media (prefers-reduced-motion:reduce){.pe-card,.pe-cover,.pe-chevron{transition:none}.pe-card:active{scale:none}.pe-cover,.pe-card:hover .pe-cover,.pe-card:active .pe-cover,.pe-card:focus-visible .pe-cover{transform:none}}