.memos-container{max-width:1000px;margin:6rem auto 2rem;padding:0 24px}.memos-hero{text-align:center;margin-bottom:5rem;position:relative}.memos-hero:after{content:"";position:absolute;bottom:-2rem;left:50%;transform:translate(-50%);width:40px;height:3px;background:linear-gradient(90deg,var(--purple),var(--blue));border-radius:2px;opacity:.5}.memos-hero-subtitle{font-family:var(--font-serif);font-size:.9rem;letter-spacing:.2em;color:var(--grey);text-transform:uppercase;margin-bottom:1rem;opacity:.8}.memos-hero-slogan{font-family:var(--font-serif);font-size:3.5rem;font-weight:700;color:var(--text);line-height:1.2;letter-spacing:-.02em;background:linear-gradient(135deg,var(--text) 0%,var(--grey) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.memos-grid{column-count:2;column-gap:1.5rem}@media(max-width:768px){.memos-grid{column-count:1}.memos-hero-slogan{font-size:2.5rem}}.memo-card{background:#fff9;border:1px solid rgba(255,255,255,.4);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;break-inside:avoid;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 20px -2px #00000005,0 0 0 1px #ffffff80 inset;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:0;animation:fadeInUp .6s ease forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.memo-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px -4px #a259ec1a,0 0 0 1px #a259ec33 inset;background:#fffc}.memo-header{margin-bottom:1rem;display:flex;justify-content:flex-end;align-items:center}.memo-time{font-size:.8rem;color:var(--grey);font-family:var(--font-mono, monospace);opacity:.7;background:#00000008;padding:2px 8px;border-radius:12px}.memo-body{color:var(--text);line-height:1.75;word-break:break-word;font-size:1rem}.memo-body p{margin-bottom:.8em}.memo-body p:last-child{margin-bottom:0}.memo-body .memo-img,.memo-attachments .memo-img,img.memo-img{max-width:100%!important;width:100%;height:auto;border-radius:8px;margin:.5em 0;display:block;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.memo-img:hover{transform:scale(1.02);box-shadow:0 4px 16px #a259ec33}.memo-attachments{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin-top:1rem}.memo-attachments a{display:block;position:relative;overflow:hidden;border-radius:8px;aspect-ratio:1}.memo-attachments img{width:100%;height:100%;object-fit:cover;margin:0}@media(max-width:768px){.memo-attachments{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}.lightbox{display:none;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background-color:#000000e6;align-items:center;justify-content:center;animation:fadeIn .3s ease}.lightbox.active{display:flex}.lightbox-content{max-width:90%;max-height:90%;object-fit:contain;border-radius:8px;animation:zoomIn .3s ease}.lightbox-close{position:absolute;top:20px;right:40px;color:#fff;font-size:40px;font-weight:700;cursor:pointer;transition:color .3s;z-index:10000}.lightbox-close:hover{color:var(--purple)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.loading-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 0;color:var(--grey)}.spinner{border:3px solid rgba(162,89,236,.1);width:40px;height:40px;border-radius:50%;border-left-color:var(--purple);animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.error-message{color:#ef4444;text-align:center;padding:1rem;background:#ef44441a;border-radius:8px}.error-message:empty{display:none;padding:0}html.dark .memo-card{background:#1e1e1e66;border:1px solid rgba(255,255,255,.05);box-shadow:0 4px 20px -2px #0003,0 0 0 1px #ffffff0d inset}html.dark .memo-card:hover{background:#28282899;box-shadow:0 12px 30px -4px #a259ec26,0 0 0 1px #a259ec4d inset}html.dark .memo-time{background:#ffffff0d;color:#b5aed6}html.dark .memo-img{box-shadow:0 2px 8px #0006}html.dark .memo-img:hover{box-shadow:0 4px 16px #a259ec4d}html.dark .lightbox{background-color:#000000f2}
