@layer components{.note{grid-template-columns:3rem minmax(0,1fr);column-gap:1rem;display:grid}@media not (prefers-reduced-motion:reduce){.note{view-transition-name:auto;view-transition-name:attr(id type(<custom-ident>), none);view-transition-class:note}}@media (width>=640px){.note{row-gap:1rem}}@media (prefers-reduced-motion:no-preference){.note{animation:linear scale-up;animation-timeline:view();animation-range:entry entry 30vh}}.note>figure{--size:3rem;inline-size:var(--size);block-size:var(--size);background-color:var(--line);border-radius:999px;margin:0;overflow:hidden}@media (prefers-color-scheme:dark){.note>figure{background:linear-gradient(to bottom right,#7dd3fc66,#a5b4fc66,#f9a8d466)}}.note>figure img{object-fit:cover;width:100%;height:100%}.note>div{grid-column:span 2;padding-block-start:1.5rem}@media (width>=640px){.note>div{grid-column:2;padding-block-start:0}}.note>header{flex-direction:column;align-self:center;gap:.5rem .25rem;font-size:14px;display:flex}@media (prefers-color-scheme:dark){.note>header{color:var(--text-dark)}}@media (width>=640px){.note>header{font-size:19px}}.note>header time{font-size:12px}@media (width>=640px){.note>header time{font-size:15px}}.note>header>.tags{color:var(--text-light);flex-wrap:wrap;align-items:center;column-gap:.5rem;font-size:14px;display:flex}.note>header>.tags .icon{translate:0 -1px}.note>header>.tags a:not(:last-child):after{content:",";padding-inline-end:.5ch;display:inline-block}.note>footer{grid-row-start:2;grid-column-start:2;align-self:end}@media (width>=640px){.note>footer{grid-row-start:auto}}.note>footer{color:var(--text-light);flex-wrap:wrap;column-gap:.5rem;margin-inline-start:-.5rem;font-size:12px;display:flex}.note>footer>button{appearance:unset;color:var(--text-light);cursor:pointer;background:0 0;border:none;border-radius:999px;align-items:center;column-gap:.5rem;padding:.25rem .5rem;font-family:inherit;transition:background .2s,color .2s;display:flex}.note>footer>button:hover{color:var(--lightningcss-light,var(--text))var(--lightningcss-dark,var(--bg));background:var(--accent)}@keyframes scale-up{0%{opacity:.5;transform:scale(.95)}to{opacity:1;transform:scale(1)}}}