:root { --ink:#f8eee6; --muted:#c8b5a9; --accent:#d6a888; --deep:#201a18; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--deep); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
body { overflow:hidden; }
.screen-shell { position:relative; display:flex; flex-direction:column; justify-content:space-between; width:100vw; min-height:100vh; padding:6vh 8vw 5vh; overflow:hidden; background:radial-gradient(circle at 72% 40%, rgba(160,99,75,.34), transparent 30%), radial-gradient(circle at 20% 10%, rgba(204,154,124,.18), transparent 30%), linear-gradient(135deg,#2c2220 0%,#1c1716 65%,#332320 100%); }
.grain { position:absolute; inset:0; opacity:.14; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.55) .5px,transparent .5px); background-size:5px 5px; mix-blend-mode:soft-light; }
.screen-header,.live-area,.screen-footer { position:relative; z-index:1; }
.screen-header { text-align:center; }
.eyebrow,.live-label { color:var(--accent); font-size:clamp(10px,1.1vw,16px); letter-spacing:clamp(3px,.6vw,8px); }
h1 { margin:22px 0 0; font:clamp(44px,7vw,112px) "Songti SC","STSong",serif; letter-spacing:clamp(4px,1vw,16px); }
h1 span { color:var(--accent); font:clamp(32px,4vw,72px) Georgia,serif; font-style:italic; }
.screen-header p { margin:20px 0 0; color:var(--muted); font:clamp(16px,1.8vw,28px) "Songti SC","STSong",serif; letter-spacing:clamp(2px,.3vw,5px); }
.live-area { width:min(1120px,100%); margin:0 auto; padding:clamp(28px,5vh,72px) clamp(20px,4vw,66px); border:1px solid rgba(232,194,166,.24); border-radius:28px; background:rgba(45,31,28,.52); box-shadow:0 30px 90px rgba(0,0,0,.24); }
.live-label { display:flex; align-items:center; gap:12px; }
.live-label i { display:block; width:10px; height:10px; border-radius:50%; background:#de735c; box-shadow:0 0 0 7px rgba(222,115,92,.12); }
.feed-content { display:grid; place-items:center; min-height:280px; margin-top:32px; text-align:center; }
.feed-empty { color:var(--muted); font-size:clamp(18px,2vw,30px); }
.blessing-slide { max-width:980px; color:var(--ink); animation:fadein .8s ease; }
.blessing-text { color:#fff8f1; font:clamp(28px,4vw,68px)/1.45 "Songti SC","STSong",serif; letter-spacing:clamp(2px,.3vw,5px); text-shadow:0 2px 24px rgba(0,0,0,.28); }
.blessing-from { margin-top:28px; color:var(--accent); font-size:clamp(15px,1.5vw,24px); letter-spacing:4px; }
.photo-slide { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.7fr); align-items:center; gap:48px; width:100%; animation:fadein .8s ease; }
.photo-slide img { width:100%; max-height:470px; object-fit:contain; border-radius:18px; background:#352622; }
.photo-caption { color:var(--muted); text-align:left; }
.photo-caption strong { display:block; color:var(--accent); font:clamp(22px,2.3vw,38px) "Songti SC","STSong",serif; }
.photo-caption p { margin-top:14px; font-size:clamp(15px,1.4vw,22px); line-height:1.7; }
.feed-progress { height:2px; margin-top:36px; background:rgba(255,255,255,.16); }
.feed-progress span { display:block; width:0; height:100%; background:var(--accent); }
.screen-footer { display:flex; justify-content:space-between; gap:24px; color:var(--muted); font-size:clamp(12px,1.1vw,18px); letter-spacing:2px; }
@keyframes fadein { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:720px) { .screen-shell { padding:5vh 18px 4vh; } .photo-slide { grid-template-columns:1fr; gap:20px; } .photo-slide img { max-height:300px; } .screen-footer { flex-direction:column; gap:8px; } }