* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html, body { margin: 0; min-height: 100%; background: #000; }
body { overflow: hidden; }
.site-logo { position: fixed; z-index: 10; top: 18px; left: 20px; display: block; max-width: 100px; max-height: 44px; }
.site-logo img { display: block; max-width: 100%; max-height: 44px; object-fit: contain; }
.top-nav { position: fixed; z-index: 10; top: 18px; left: 50%; display: flex; gap: 20px; transform: translateX(-50%); }
.top-nav-item { color: #fff; font-size: 15px; text-decoration: none; text-shadow: 0 1px 5px #000; white-space: nowrap; }
.top-nav-item.is-active { font-weight: 800; }
.site-footer { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; height: 42px; background: #0008; }
.feed { width: 100%; height: 100svh; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.work { position: relative; width: 100%; height: 100svh; overflow: hidden; scroll-snap-align: start; background: #171717; }
.media { display: block; width: 100%; height: 100%; object-fit: cover; background: #090909; }
video.media { object-fit: cover; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 68%, rgba(0, 0, 0, .16)), linear-gradient(0deg, rgba(0, 0, 0, .25), transparent 30%); }
.actions { position: absolute; right: 20px; bottom: 12%; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.action { display: grid; place-items: center; gap: 5px; width: 54px; padding: 0; border: 0; color: #fff; background: none; cursor: pointer; text-shadow: 0 1px 5px #000; }
.action-icon { display: block; width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); transition: transform .2s; }
.action:hover .action-icon { transform: scale(1.1); }
.action small { font-size: 14px; font-weight: 600; }
.empty-state { display: grid; place-content: center; gap: 12px; height: 100svh; color: #fff; text-align: center; }
.empty-state strong { font-size: 22px; }.empty-state span { color: #999; }.empty-state a { color: #ff315d; text-decoration: none; }
@media (min-width: 700px) { .work { width: min(680px, 100vw); margin: 0 auto; } .feed { background: #111; } }
@media (max-width: 420px) { .actions { right: 14px; bottom: 12%; } .site-logo { top: 12px; left: 14px; max-width: 78px; max-height: 34px; }.site-logo img { max-height: 34px; }.top-nav { top: 14px; gap: 12px; }.top-nav-item { font-size: 13px; } }