:root{
--bg:#0b0b0d;
--card:#121216;
--text:#f2f2f2;
--muted:#a9a9b2;
--line:#24242a;
--radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:var(--bg);
color:var(--text);
}

.top{
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:18px 16px 10px;
border-bottom:1px solid var(--line);
}

.brand{letter-spacing:.18em; font-weight:700; font-size:12px; color:var(--muted)}
.meta{text-align:right}
.today{font-size:12px; color:var(--muted)}
.countdown{font-size:12px; color:var(--muted); margin-top:4px}

.wrap{max-width:900px; margin:0 auto; padding:18px 16px 32px}

.hero h1{margin:6px 0 6px; font-size:28px}
.note{margin:0; color:var(--muted); max-width:70ch}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{
font-size:12px;
padding:6px 10px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
background:transparent;
}

.viewer{margin-top:18px}
.frame{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
min-height:360px;
display:flex;
align-items:center;
justify-content:center;
}
.frame img{width:100%; height:auto; display:block}

.caption{
margin-top:12px;
padding:14px;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
}
.line1{display:flex; gap:10px; align-items:baseline; justify-content:space-between}
.artTitle{font-weight:700}
.artYear{color:var(--muted)}
.artAuthor{margin-top:6px; color:var(--muted)}
.artDesc{margin-top:10px; opacity:.9; line-height:1.4}

.controls{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:12px;
}
.btn{
background:transparent;
color:var(--text);
border:1px solid var(--line);
border-radius:999px;
padding:10px 14px;
font-weight:600;
}
.idx{color:var(--muted); font-size:12px}

.footer{margin-top:18px; color:var(--muted); font-size:12px}