@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}}.note+.note{margin-block-start:1rem}@media (min-width: 640px){.note{row-gap:.5rem}}@media (prefers-reduced-motion: no-preference){.note{animation:linear scale-up;animation-timeline:view();animation-range:entry 0% entry 30vh}}.note>figure{margin:0;grid-row:span 2;--size: 3rem;overflow:hidden;border-radius:999px;inline-size:var(--size);block-size:var(--size);background-color:var(--line-light)}@media (min-width: 640px){.note>figure{grid-row:span 3}}@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{display:flex;align-items:baseline;column-gap:.25rem;font-size:14px;padding-block:.25rem}@media not (min-width: 640px){.note>header{align-self:end}}@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>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;-webkit-appearance:unset;-moz-appearance:unset;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)}}.note>footer>div{display:flex;column-gap:.5rem;align-items:center;padding:.25rem .5rem}.note>footer>div a:not(:last-child):after{display:inline-block;padding-inline-end:.5ch;content:","}@keyframes scale-up{0%{opacity:.5;transform:scale(.95)}to{opacity:1;transform:scale(1)}}copy-button>button{display:flex;column-gap:.5rem;align-items:center;font-weight:500;font-stretch:95%;padding:.25rem .5rem;-webkit-appearance:unset;-moz-appearance:unset;appearance:unset;text-align:start;border:none;border-radius:999px;color:var(--text-light);background:transparent;cursor:pointer;transition:.2s background,.2s color}copy-button>button>svg:last-of-type{display:none}copy-button>button[data-copied]>svg:first-of-type{display:none}copy-button>button[data-copied]>svg:last-of-type{display:block}copy-button>button:hover{color:var(--text);background:var(--accent)}@media (prefers-color-scheme: dark){copy-button>button:hover{color:var(--bg)}}}