/* 保留上游的影像横幅与作品网格结构，覆盖示例主题并移除外部字体依赖。 */
:root{color-scheme:dark;--bg:#111114;--text:#f4f2ee;--muted:#aaa9b0;--accent:#ddd5b4}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,video:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.skip{position:fixed;top:-100px;z-index:99;background:#fff;color:#111;padding:15px}.skip:focus{top:0}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#111114;position:relative;z-index:2;border-bottom:1px solid #ffffff15}.brand{font-size:24px;font-weight:700;letter-spacing:1px;display:flex;align-items:baseline;gap:3px}.brand>span{color:var(--accent)}.brand small{font-size:10px;letter-spacing:2px;font-weight:400;color:var(--muted);margin-left:23px}nav{display:flex;gap:32px;font-size:13px}nav a{color:#c5c4cc}nav a:hover{color:#fff}
.hero-section{height:570px;min-height:0;align-items:center;justify-content:flex-start;background:#18171b}.hero-section .banner-image{object-position:70% 38%;opacity:.85}.hero-section::after{background:linear-gradient(90deg,rgba(12,12,16,.95),rgba(12,12,16,.5) 42%,rgba(12,12,16,.04) 75%),linear-gradient(0deg,#111114,transparent 25%)}.hero-copy{position:relative;z-index:3;margin-left:7%;padding:45px 0}.hero-section h1{font-size:clamp(40px,5.2vw,74px);line-height:1.24;letter-spacing:3px;margin:0 0 24px;font-weight:650;white-space:normal}.hero-section h1 span{color:var(--accent)}.hero-copy>p{color:#d4d0cf;font-size:16px;letter-spacing:3px;margin:0 0 35px}.primary{border:0;background:var(--accent);color:#23221d;padding:17px 23px;font-size:13px;font-weight:650;border-radius:3px}.primary:hover{background:#eee7ce}.primary span{margin-left:20px;font-size:11px;opacity:.65}.hero-more{display:block;margin-top:22px;color:#c5c2c0;font-size:12px}.hero-caption{position:absolute;right:6%;bottom:40px;z-index:3;font-size:11px;color:#d0caca;letter-spacing:1px}.hero-caption span{display:block;text-align:right;margin-top:8px;color:#fff;font-size:16px}
.works-section{padding:55px 5% 80px;max-width:1600px;margin:auto}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.section-heading h2{font-size:28px;letter-spacing:1px;margin:0 0 14px}.section-heading h2 span{font-size:11px;font-weight:400;letter-spacing:2px;color:#8e8c93;margin-left:12px}.section-heading p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}.section-heading>span{color:#aaa8af;font-size:12px;white-space:nowrap}.category-filter{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 28px}.category-btn{background:transparent;border:1px solid #343338;border-radius:3px;color:#b7b5be;padding:10px 17px;font-size:12px}.category-btn span{font-size:10px;margin-left:10px;opacity:.65}.category-btn.active{background:#e9e5d9;color:#202024;border-color:#e9e5d9}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;padding:0}.video-card{background:none;border:0;border-radius:0;box-shadow:none;padding:0;text-align:left;color:var(--text);overflow:visible;transition:none;aspect-ratio:auto;position:relative;display:block}.video-card:hover{transform:none;box-shadow:none}.video-card[hidden]{display:none}.card-media{position:relative;aspect-ratio:16/10;background:#1c1c21;border-radius:4px;overflow:hidden;border:1px solid #ffffff0b}.video-card img{position:static;width:100%;height:100%;display:block;object-fit:contain;transition:transform .3s}.video-card:hover img{transform:scale(1.025)}.play-symbol{position:absolute;left:16px;bottom:14px;display:grid;place-items:center;width:32px;height:32px;background:#1119;border:1px solid #ffffff60;border-radius:50%;font-size:10px}.duration{position:absolute;right:12px;bottom:15px;font-size:11px;background:#090909aa;padding:4px 7px;border-radius:2px;font-variant-numeric:tabular-nums}.card-title{display:block;font-size:14px;margin:15px 0 7px;font-weight:500;line-height:1.5}.card-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.5px;color:#929099}.card-meta span:last-child{color:#77757d}
.about-section{border-top:1px solid #2c2b30;display:grid;grid-template-columns:1fr 2fr;gap:40px;margin:0 5%;padding:48px 0 65px}.about-section h2{font-size:20px;margin:4px 0}.about-section p{font-size:14px;line-height:2;margin:0 0 12px;max-width:690px;color:#ccc9d0}.about-section p.muted{font-size:12px;color:#8b8993}footer{display:flex;align-items:center;gap:24px;padding:28px 5%;border-top:1px solid #2c2b30}footer>span,footer>a:last-child{font-size:11px;color:#89878f}footer>a:last-child{margin-left:auto}footer .brand{font-size:20px}
dialog{width:min(1050px,94vw);max-height:94dvh;padding:20px;background:#18181d;border:1px solid #48464d;border-radius:8px;color:#eee;overflow:auto}dialog::backdrop{background:#000d}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}.modal-heading h2{font-size:16px;margin:0}.modal-heading button{background:#2c2b32;border:1px solid #48464d;color:#eee;border-radius:4px;padding:9px 13px;white-space:nowrap}#modalPlayer{display:block;background:#000;width:100%;height:min(65dvh,570px);object-fit:contain}.modal-details{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px;color:#aaa7b3;line-height:1.8}.modal-details a{white-space:nowrap;text-decoration:underline}#playbackStatus{font-size:12px;color:#e8c28d;margin:0;line-height:1.8}#loadStatus{font-size:13px;color:#aaa}[hidden]{display:none!important}body.modal-open{overflow:hidden}
@media(min-width:1700px){.hero-section{height:640px}}
@media(max-width:800px){.site-header{height:70px}.brand small{display:none}.hero-section{height:510px}.hero-copy{margin-left:6%}.hero-caption{display:none}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}.about-section{grid-template-columns:1fr;gap:16px}.section-heading h2{font-size:25px}}
@media(max-width:480px){nav{gap:18px;font-size:12px}.hero-section{height:490px}.hero-section .banner-image{object-position:65% center}.hero-section::after{background:linear-gradient(90deg,#101014df,#10101433),linear-gradient(0deg,#111114,transparent 50%)}.hero-section h1{font-size:44px;letter-spacing:1px}.hero-copy>p{font-size:13px;letter-spacing:1px}.primary{padding:15px 16px}.works-section{padding-top:28px}.section-heading{align-items:flex-start}.section-heading h2 span{display:block;margin:8px 0 0;font-size:9px}.section-heading p{font-size:12px}.section-heading>span{padding-top:5px;font-size:10px}.category-filter{gap:7px;margin:24px 0}.category-btn{padding:9px 11px;font-size:11px}.category-btn span{margin-left:5px}.video-grid{grid-template-columns:1fr;gap:25px}.card-media{aspect-ratio:16/10}.card-title{font-size:14px}.modal-heading h2{font-size:13px}dialog{padding:12px}.modal-details{display:block}.modal-details p{margin:10px 0 4px}.about-section{padding:30px 0}.about-section p{font-size:13px}footer{gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}