*:focus{outline:none}
*{box-sizing:border-box}
:root{color-scheme:light dark}
body{margin:0;background:#0f172a;color:#e5e7eb;font-family:"Noto Sans SC",system-ui}
.bg-mosaic{position:fixed;inset:0;z-index:-1;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;opacity:.26;filter:saturate(92%) blur(3px)}
.bg-mosaic img{width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.bg-gradient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(1200px 600px at 50% 0%, rgba(2,6,23,.20) 0%, rgba(2,6,23,.48) 42%, rgba(2,6,23,.85) 100%),
  linear-gradient(to bottom, rgba(2,6,23,.08) 0%, rgba(2,6,23,.52) 48%, rgba(2,6,23,.90) 100%)}
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.album-card{background:#111827;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.album-card .cover{aspect-ratio:16/9;background:#0b1220}
.album-card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.album-card .body{padding:12px}
.album-card .title{font-weight:700}
.album-card .sub{opacity:.75}
.timeline-btn{position:fixed;left:20px;bottom:20px;width:48px;height:48px;border:none;border-radius:24px;background:rgba(31,41,55,.7);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.35);z-index:40}
.home-btn{position:fixed;left:84px;bottom:20px;width:48px;height:48px;border:none;border-radius:24px;background:rgba(31,41,55,.7);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.35);z-index:40}
.home-btn:hover,.timeline-btn:hover{transform:scale(1.04)}
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(2,6,23,.6);backdrop-filter:saturate(180%) blur(8px)}
.brand{font-weight:700}
.nav{display:flex;gap:12px}
.nav-link{color:#cbd5e1;text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-link.active{background:#1f2937;color:#fff}
.main{max-width:1200px;margin:0 auto;padding:16px}
.section-head h2{margin:0 0 6px;font-size:22px}
.section-head p{margin:0 0 12px;opacity:.85}
#home-view .section-head{margin-top:60px;padding:18px 22px;border-radius:16px;background:rgba(17,24,39,.35);backdrop-filter:saturate(160%) blur(8px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
#home-view .section-head h2{font-size:34px;letter-spacing:.5px}
#home-view .section-head p{font-size:15px}

#album-view .section-head{margin-top:16px;padding:16px 18px;border-radius:14px;background:rgba(17,24,39,.30);backdrop-filter:saturate(160%) blur(8px);box-shadow:0 14px 40px rgba(0,0,0,.30)}
#album-view .section-head h2{font-size:28px;letter-spacing:.4px}
#album-view .section-head p{font-size:14px;opacity:.85}
.album-back-btn{position:absolute;right:12px;top:12px;width:40px;height:40px;border:none;border-radius:20px;background:rgba(31,41,55,.7);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.album-back-btn:hover{transform:scale(1.04)}
.album-desc{opacity:.85}
.masonry{column-count:4;column-gap:12px}
.card{break-inside:avoid;background:#111827;border-radius:14px;overflow:hidden;margin:0 0 12px}
.card img{width:100%;height:auto;display:block}
.card .meta{padding:10px 12px;opacity:.8}
.timeline{position:relative}
.timeline-day{margin:28px 0}
.timeline-date{display:inline-block;padding:8px 12px;border-radius:10px;background:rgba(17,24,39,.8);font-weight:700;letter-spacing:.5px;z-index:1;position:relative}
.timeline-day-grid{position:relative}
.day{background:#111827;border-radius:12px;padding:12px}
.viewer{position:fixed;inset:0;background:rgba(2,6,23,.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50}
.viewer-image-wrap{max-width:90vw;max-height:85vh;display:flex;align-items:center;justify-content:center}
.viewer-image-wrap img{max-width:90vw;max-height:85vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.viewer-image-wrap canvas{max-width:90vw;max-height:85vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.viewer-actions{position:fixed;top:20px;right:20px;display:flex;gap:10px}
.fab{width:48px;height:48px;border-radius:24px;border:none;background:rgba(31,41,55,.7);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:opacity .2s,transform .2s}
.fab:hover{transform:scale(1.04)}
 .fab svg{stroke-linecap:round;stroke-linejoin:round}
.viewer-info{position:fixed;right:20px;top:80px;width:320px;max-height:70vh;overflow:auto;background:rgba(17,24,39,.8);border-radius:12px;padding:14px}
.hidden{display:none}
.footer{padding:24px;text-align:center;opacity:.6}
@media (max-width:1024px){.masonry{column-count:3}}
@media (max-width:768px){.masonry{column-count:2}.viewer-image-wrap img{max-width:95vw;max-height:70vh}}
@media (max-width:480px){.masonry{column-count:1}.viewer-actions{top:auto;bottom:18px;right:18px}}
.bg-mosaic{grid-auto-rows:1fr}
@media (max-width:1024px){.bg-mosaic{grid-template-columns:repeat(6,1fr)}}
@media (max-width:768px){.bg-mosaic{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.bg-mosaic{grid-template-columns:repeat(3,1fr)}}
.show-on-active .fab{opacity:0}
.show-on-active:hover .fab,.show-on-active.touch .fab{opacity:1}
.timeline-btn.active{background:#2563eb}
.timeline-btn.pulse{animation:pulse .5s}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.panel{background:#111827;border-radius:16px;padding:16px}