.op-note-card{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:24px;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s;position:relative;overflow:hidden;container-type:inline-size}@media (hover:hover){.op-note-card:hover{border-color:var(--border-strong);box-shadow:0 2px 4px #0000000f, 0 18px 40px -16px color-mix(in srgb, var(--k) 45%, transparent);transform:translateY(-2px)}.op-note-card:hover .op-note-card-page{transform:translateY(-4px)}}.op-note-card:active{transform:scale(.985)}.op-note-card-thumb{background:radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--k) 22%, transparent), transparent 62%), radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--k) 10%, transparent), transparent 70%), linear-gradient(170deg, var(--k-soft), color-mix(in srgb, var(--k-soft) 40%, var(--surface)));border-bottom:1px solid color-mix(in srgb, var(--k) 14%, var(--border));height:9.5rem;display:block;position:relative;overflow:hidden}.op-note-card-page{background:var(--surface);box-shadow:0 0 0 1px color-mix(in srgb, var(--k) 12%, var(--border)), 0 10px 24px -12px color-mix(in srgb, var(--k) 55%, transparent);border-radius:14px 14px 0 0;flex-direction:column;gap:.3rem;padding:.75rem .85rem;transition:transform .3s cubic-bezier(.2,.7,.2,1);display:flex;position:absolute;inset:3.25rem 1rem -.75rem 3.25rem}@container (width<=14rem){.op-note-card-thumb{height:7.75rem}.op-note-card-page{padding:.6rem .7rem;inset:3.1rem .625rem -.75rem}}.op-note-card-words{min-height:0;font-family:var(--font-serif);color:var(--text-2);max-height:4.7em;font-size:.75rem;line-height:1.55;display:block;overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,#0000);mask-image:linear-gradient(#000 45%,#0000)}@media (prefers-reduced-motion:reduce){.op-note-card,.op-note-card-page{transition:none}.op-note-card:hover,.op-note-card:active,.op-note-card:hover .op-note-card-page{transform:none}}