.ai-video-project { background:#000; color:#fff; font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; }
.ai-video-project :is(h2,h3,p) { margin:0; }
.ai-video-project button { color:inherit; font:inherit; }
.ai-video-wrap { width:min(90%,1360px); margin-inline:auto; }
.ai-video-heading { padding-block:100px 46px; }
.ai-video-project .ai-video-heading h2 { font-size:clamp(46px,5.2vw,80px); line-height:1.05; font-weight:500; letter-spacing:-.045em; }
.ai-video-heading h2 .ai-video-subtitle { font-size:.72em; }
.ai-video-part { --video-size:clamp(220px,30vw,440px); overflow:clip; padding-bottom:100px; }
.ai-video-title { height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; pointer-events:none; }
.ai-video-project[data-motion-mode="scroll"] .ai-video-title { position:sticky; top:0; height:100svh; margin-bottom:-100svh; z-index:3; mix-blend-mode:exclusion; }
.ai-video-title p { font-size:14px; letter-spacing:.04em; }
.ai-video-project .ai-video-title h3 { font-size:clamp(52px,8vw,128px); line-height:1; font-weight:500; letter-spacing:-.055em; pointer-events:auto; }
.ai-video-grid { position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:var(--video-size); gap:clamp(32px,6vw,96px) clamp(16px,2vw,32px); padding-block:80px; box-sizing:border-box; min-height:100svh; }
.ai-video-cell { grid-column:var(--video-column) / span 3; grid-row:var(--video-row); display:flex; justify-content:center; align-items:center; }
.ai-video-art { --hover-x:50%; --hover-y:50%; display:block; position:relative; width:min(100%,calc(var(--video-size) * var(--video-aspect))); padding:0; border:0; background:#000; border-radius:var(--surface-radius); overflow:hidden; cursor:pointer; }
.ai-video-art img { display:block; width:100%; height:auto; border-radius:inherit; }
.ai-video-art video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; border-radius:inherit; pointer-events:none; }
.ai-video-art::after { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px; opacity:0; pointer-events:none; background:radial-gradient(210px circle at var(--hover-x) var(--hover-y),#ffffffb3,#ffffff30 48%,#ffffff09 85%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; transition:opacity .28s ease; }
.ai-video-project button:focus-visible { outline:1px solid #fff; outline-offset:5px; }
@media (hover:hover) and (pointer:fine) { .ai-video-art:is(:hover,:focus-visible)::after { opacity:1; } }
.ai-video-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; box-sizing:border-box; padding:70px 60px 80px; border:0; margin:0; background:#000; color:#fff; overflow:hidden; }
.ai-video-lightbox::backdrop { background:#000; }
.ai-video-viewer-stage { height:100%; display:flex; align-items:center; justify-content:center; }
.ai-video-viewer-stage video { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--surface-radius); }
.ai-video-arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ffffff65; border-radius:50%; background:transparent; font-size:22px!important; line-height:1; cursor:pointer; }
.ai-video-close { position:absolute; right:24px; top:20px; font-size:30px!important; }
.ai-video-viewer-nav { position:absolute; bottom:22px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; }
.ai-video-position { color:#aaa; font-size:13px; }
.ai-video-error { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:24px; background:#000; text-align:center; }
.ai-video-error[hidden] { display:none; }
.ai-video-error button { margin-top:16px; padding:8px 18px; border:1px solid #666; border-radius:var(--surface-radius); background:transparent; }
@media (max-width:700px) {
 .ai-video-heading { padding-block:60px 32px; }
 .ai-video-part { --video-size:clamp(200px,65vw,340px); padding-bottom:60px; }
 .ai-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 20px; padding-block:60px; align-content:center; }
 .ai-video-cell { grid-column:auto; grid-row:auto; }
 .ai-video-project .ai-video-title h3 { font-size:clamp(44px,12vw,74px); }
 .ai-video-lightbox { padding:70px 18px 80px; }
}
@media (prefers-reduced-motion:reduce) { .ai-video-art::after { transition:none; } }