:root{--bg:#fff;--fg:#202124;--muted:#5f6368;--line:#dadce0;--card:#f8f9fa;--accent:#1a73e8}
@media (prefers-color-scheme:dark){:root{--bg:#202124;--fg:#e8eaed;--muted:#9aa0a6;--line:#3c4043;--card:#2d2e31;--accent:#8ab4f8}}
*{box-sizing:border-box}
body{margin:0;font-family:"Google Sans",Roboto,system-ui,sans-serif;background:var(--bg);color:var(--fg)}
header.top{display:flex;align-items:center;gap:12px;height:64px;padding:0 16px;border-bottom:1px solid var(--line)}
header.top a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px}
.logo{width:28px;height:28px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc04 0 50%,#34a853 0 75%,#4285f4 0)}
.brand{font-size:1.25rem;font-weight:500}
.back{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem}
.back:hover{background:var(--card)}
.title{font-size:1.15rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{max-width:1200px;margin:0 auto;padding:24px 16px}
h1{font-size:1.4rem;font-weight:400;margin:0 0 20px}
.grid{display:grid;gap:24px 16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.album{display:block;color:inherit;text-decoration:none}
.cover{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;position:relative}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .lock{font-size:3rem;opacity:.6}
.album:hover .cover{box-shadow:0 2px 10px rgba(0,0,0,.25)}
.name{margin:8px 2px 0;font-size:.95rem;font-weight:500}
.meta{margin:2px 2px 0;font-size:.8rem;color:var(--muted)}
.embed-page{display:flex;flex-direction:column;height:100vh}
.embed-page iframe{flex:1;width:100%;border:0;background:var(--bg)}