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