.vision-shell{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:12px;background:rgba(1,3,8,.94);backdrop-filter:blur(16px);color:#EAF7FF}
.vision-shell[hidden]{display:none}
body.vision-film-open{overflow:hidden}
.vision-dialog{width:min(1580px,calc(100vw - 24px));height:min(900px,calc(100dvh - 24px));display:grid;grid-template-rows:58px minmax(0,1fr) 36px;overflow:hidden;border:1px solid rgba(84,220,231,.24);border-radius:16px;background:#05080D;box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.035) inset;opacity:0;transform:scale(.985);transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.vision-shell.open .vision-dialog{opacity:1;transform:scale(1)}
.vision-head{display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,#0A111B,#0A1420 62%,#081018)}
.vision-back{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#0D1722;color:#AFC3D8;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.vision-back:hover{background:#132334;color:#F4FCFF;border-color:rgba(84,220,231,.35)}
.vision-back svg{width:19px;height:19px}
.vision-brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.vision-brand strong{font-size:17px;letter-spacing:-.03em;white-space:nowrap}.vision-brand strong i{color:#54DCE7;font-style:normal}
.vision-brand span{color:#788DA5;font-size:10px;letter-spacing:.05em;white-space:nowrap}
.vision-head-spacer{flex:1}
.vision-meta{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:7px;padding-right:4px;color:#7F94AA}
.vision-meta b{color:#B8F7FC;font:700 11px var(--mono,monospace)}.vision-meta span{font-size:10px}
.vision-spatial{height:36px;padding:0 14px;border:1px solid rgba(84,220,231,.32);border-radius:9px;background:rgba(84,220,231,.09);color:#DFFBFE;font:700 11px var(--ui,sans-serif);cursor:pointer;transition:background .18s ease,transform .18s ease}
.vision-spatial:hover{background:rgba(84,220,231,.16);transform:translateY(-1px)}
.vision-stage{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;background:#000}
.vision-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(34,74,101,.22),transparent 62%);pointer-events:none}
.vision-video{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;background:#000}
.vision-start{position:absolute;z-index:3;left:50%;top:50%;display:flex;align-items:center;gap:14px;min-width:330px;padding:15px 20px 15px 15px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(4,10,17,.78);color:#F3FBFF;box-shadow:0 18px 46px rgba(0,0,0,.42);backdrop-filter:blur(18px);transform:translate(-50%,-50%);cursor:pointer;transition:opacity .2s ease,background .18s ease,border-color .18s ease}
.vision-start:hover{background:rgba(8,21,32,.9);border-color:rgba(84,220,231,.44)}
.vision-start[hidden]{display:none}
.vision-start i{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#54DCE7;color:#031015;box-shadow:0 0 30px rgba(84,220,231,.24)}
.vision-start svg{width:24px;height:24px;fill:currentColor}
.vision-start span{text-align:left}.vision-start b{display:block;font-size:15px}.vision-start small{display:block;margin-top:4px;color:#9EB0C2;font-size:9.5px;white-space:nowrap}
.vision-ended{position:absolute;z-index:4;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:42px;background:linear-gradient(180deg,transparent 24%,rgba(2,5,10,.9) 82%);animation:visionFade .35s ease both}
.vision-ended[hidden]{display:none}
.vision-ended span{color:#7FEAF2;font:700 9px var(--mono,monospace);letter-spacing:.1em}.vision-ended h2{max-width:680px;margin:8px 0 0;font-size:28px;line-height:1.2;letter-spacing:-.035em}
.vision-ended-actions{display:flex;gap:9px}.vision-ended-actions button{height:42px;padding:0 17px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(10,18,28,.86);color:#D7E4EF;font:700 11px var(--ui,sans-serif);cursor:pointer}.vision-ended-actions button.primary{border-color:rgba(84,220,231,.46);background:#123340;color:#E7FCFF}
.vision-foot{display:flex;align-items:center;gap:18px;padding:0 14px;border-top:1px solid rgba(255,255,255,.07);background:#080D14;color:#71849A;font-size:9px}.vision-foot b{margin-left:auto;color:#8DDDE4;font-weight:650}.vision-foot kbd{padding:2px 5px;border:1px solid rgba(255,255,255,.13);border-radius:4px;background:#111A25;color:#AFC0D1;font:700 8px var(--mono,monospace)}
.vision-back:focus-visible,.vision-spatial:focus-visible,.vision-start:focus-visible,.vision-ended-actions button:focus-visible{outline:2px solid #54DCE7;outline-offset:3px}
@keyframes visionFade{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.vision-shell{padding:0}.vision-dialog{width:100vw;height:100dvh;border:0;border-radius:0;grid-template-rows:auto minmax(0,1fr) 34px}.vision-head{min-height:56px;padding:8px}.vision-brand span,.vision-meta{display:none}.vision-spatial{margin-left:auto}.vision-ended{align-items:flex-start;justify-content:flex-end;flex-direction:column;padding:24px 18px}.vision-ended h2{font-size:22px}.vision-ended-actions{width:100%}.vision-ended-actions button{flex:1}.vision-start{min-width:0;width:calc(100% - 32px)}.vision-start small{white-space:normal}.vision-foot span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.vision-dialog,.vision-start{transition:none}.vision-ended{animation:none}}