:root{--lime:#c8ef70;--cyan:#3ed1cd;--white:#f5f8f7;--glass:rgba(5,18,25,.84)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#02080c;color:var(--white);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;letter-spacing:0}
button{font:inherit;color:inherit}
.viewer{position:fixed;inset:0;background:#02080c;overflow:hidden;isolation:isolate}
#projectVideo{position:fixed;left:-10px;top:-10px;width:1px;height:1px;opacity:.001;pointer-events:none}
.video-canvas,.canvas-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.video-canvas{z-index:1;background:transparent}.canvas-poster{z-index:0;background:#02080c;transition:opacity .25s}.canvas-poster.hidden{opacity:0}
.video-vignette{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 28%,transparent 65%,rgba(0,0,0,.55));transition:opacity .35s}
.topbar{position:absolute;z-index:4;left:0;right:0;top:0;height:58px;padding:8px max(18px,env(safe-area-inset-right)) 8px max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;transition:opacity .3s}
.brand{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}.brand i{display:block;width:10px;height:22px;border:1.5px solid var(--lime);border-width:0 2px;transform:skew(-15deg)}
.icon-button,.small-play,.mute-button{border:0;background:transparent;cursor:pointer}.icon-button{width:42px;height:42px;display:grid;place-items:center}
.fullscreen-icon{width:18px;height:18px;border:2px solid white;clip-path:polygon(0 0,35% 0,35% 12%,12% 12%,12% 35%,0 35%,0 0,100% 0,100% 35%,88% 35%,88% 12%,65% 12%,65% 0,100% 100%,65% 100%,65% 88%,88% 88%,88% 65%,100% 65%,100% 100%,0 100%,0 65%,12% 65%,12% 88%,35% 88%,35% 100%,0 100%)}
.center-play{position:absolute;z-index:3;left:50%;top:45%;transform:translate(-50%,-50%);width:66px;height:66px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(2,10,14,.42);backdrop-filter:blur(5px);display:grid;place-items:center;cursor:pointer;transition:opacity .3s,transform .3s}.center-play span,.small-play span{display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid white;margin-left:4px}.center-play.playing{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.info-panel{position:absolute;z-index:5;right:0;top:58px;bottom:56px;width:min(390px,43vw);background:var(--glass);border-left:1px solid rgba(62,209,205,.55);backdrop-filter:blur(14px);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.panel-toggle{position:absolute;right:100%;top:50%;transform:translateY(-50%);width:34px;height:76px;border:1px solid rgba(62,209,205,.55);border-right:0;background:var(--glass);display:grid;place-items:center;padding:0;cursor:pointer;color:#d9e5e5}.chevron{display:block;font-size:26px;color:var(--lime);line-height:1;transition:transform .35s}.panel-content{height:100%;padding:14px 20px 18px;overflow-y:auto;scrollbar-width:none}.panel-content::-webkit-scrollbar{display:none}.tag{font-size:7px;letter-spacing:1.3px;color:var(--cyan);font-weight:800;margin-top:12px}.tag span{display:inline-block;width:18px;height:1px;background:var(--lime);vertical-align:middle;margin-right:7px}.panel-content h1{font-size:clamp(20px,2.6vw,34px);line-height:1.12;margin:8px 0 10px}.panel-content p{font-size:10px;line-height:1.65;color:#bdc9ca;margin:0;max-width:350px}.features{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.features span{padding:4px 7px;border:1px solid rgba(200,239,112,.35);font-size:7px;color:#dfe9d1}
.info-panel.collapsed{transform:translateX(100%)}.info-panel.collapsed .chevron{transform:rotate(180deg)}
.carousel{position:relative;width:100%;height:min(37vh,240px);min-height:120px;background:#e7efec;overflow:hidden}.slides,.slide{position:absolute;inset:0}.slide{margin:0;opacity:0;transition:opacity .45s ease}.slide.active{opacity:1}.slide img{width:100%;height:100%;object-fit:contain}.slide figcaption{position:absolute;left:10px;bottom:8px;padding:4px 7px;background:rgba(5,18,25,.75);font-size:7px;letter-spacing:1px}.carousel-arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:28px;height:36px;border:0;background:rgba(5,18,25,.62);font-size:22px;cursor:pointer}.carousel-arrow.prev{left:0}.carousel-arrow.next{right:0}.carousel-dots{position:absolute;z-index:2;right:9px;bottom:10px;display:flex;gap:5px}.carousel-dots button{width:14px;height:2px;padding:0;border:0;background:rgba(5,18,25,.3)}.carousel-dots button.active{background:var(--lime)}
.controls{position:absolute;z-index:4;left:0;right:0;bottom:0;height:50px;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);transition:opacity .3s}.small-play{width:28px;height:34px;display:grid;place-items:center}.small-play span{border-width:5px 0 5px 8px}.small-play.pause span{width:8px;height:10px;border:0;border-left:3px solid white;border-right:3px solid white;margin:0}.timeline{height:22px;flex:1;position:relative;display:flex;align-items:center}.timeline:before,.timeline-fill{content:"";position:absolute;height:2px;left:0;right:0;background:rgba(255,255,255,.3)}.timeline-fill{right:auto;width:0;background:var(--lime)}.timeline input{position:absolute;inset:0;width:100%;margin:0;opacity:0;cursor:pointer}.time{font-variant-numeric:tabular-nums;font-size:9px;color:#d1d8d8;white-space:nowrap}.mute-button{font-size:9px;padding:8px 0}
.viewer.clean .controls,.viewer.clean .topbar,.viewer.clean .video-vignette{opacity:0;pointer-events:none}
@media(orientation:portrait) and (max-width:800px){.viewer{width:100vh;height:100vw;inset:auto;left:0;top:0;transform-origin:top left;transform:rotate(90deg) translateY(-100%)}.info-panel{width:min(360px,42vh);top:48px;bottom:44px}.panel-content{padding:9px 14px 12px}.carousel{height:43%;min-height:100px}.tag{margin-top:7px}.panel-content h1{font-size:18px;margin:5px 0}.panel-content p{font-size:8px;line-height:1.5}.features{margin-top:7px}.controls{height:44px}.topbar{height:48px}}
@media(pointer:coarse){.desktop-fullscreen{display:none}}
@media(orientation:landscape) and (max-height:520px){.info-panel{width:min(360px,42vw);top:48px;bottom:44px}.panel-content{padding:9px 14px 12px}.carousel{height:43%;min-height:100px}.tag{margin-top:7px}.panel-content h1{font-size:18px;margin:5px 0}.panel-content p{font-size:8px;line-height:1.5}.features{margin-top:7px}.controls{height:44px}.topbar{height:48px}}
@media(min-width:900px){.controls{height:58px;padding-left:4vw;padding-right:4vw}.topbar{padding-left:4vw;padding-right:4vw}.info-panel{top:70px;bottom:70px}}